/*
 * Zehner-Oberfläche (zehnerui) — moderne Filter-Dropdowns für Dolibarr 24 / Theme eldy
 *
 * Geschlossen: nur in Filterbereichen von Listen (Filterzeile .liste_titre_filter,
 * Zusatzfilter darüber .liste_titre_bydiv / .divsearchfield, ältere Listen td.liste_titre).
 * Aufgeklappt: die select2-Liste hängt am <body> und lässt sich keinem Bereich zuordnen —
 * ihr Aussehen gilt deshalb für alle Auswahllisten.
 *
 * Farben: neutrale Grautöne, die Hausfarbe der Instanz (Kopfleiste, --colorbackhmenu1)
 * nur für Fokus-Ring, Häkchen und den Streifen an aktiven Filtern. Rot als Rahmen wirkt
 * sonst wie eine Fehlermeldung.
 *
 * Gewicht gegen eldy: dort stehen viele Regeln mit !important und hoher Spezifität (die
 * Fokus-Regel für Eingabefelder enthält ein #id im :not() = 1 ID). Alle Regeln hier
 * beginnen deshalb mit $B = Bereich + :not(#zui1):not(#zui2) (2 IDs, die es nicht gibt),
 * lange Ausschlusslisten stehen in :where() (zählt nicht). Zustände (Maus, aktiv, Fokus)
 * stehen weiter unten und gewinnen über die Reihenfolge bzw. eine zusätzliche Klasse.
 */

:root {
	--zui-accent: var(--colorbackhmenu1, rgb(38, 60, 92));
	--zui-bg: var(--inputbackgroundcolor, #fff);
	--zui-text: var(--colortext, #333);
	--zui-muted: #7b838d;
	--zui-line: rgba(15, 23, 42, .18);
	--zui-line-hover: rgba(15, 23, 42, .36);
	--zui-line-strong: rgba(15, 23, 42, .6);
	--zui-fill: rgba(15, 23, 42, .06);
	--zui-fill-chip: rgba(15, 23, 42, .085);
	--zui-ring: rgba(15, 23, 42, .12);
	--zui-radius: 6px;
	--zui-h: 30px;
	--zui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--zui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7480' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.25 8 9.75l3.5-3.5'/%3E%3C/svg%3E");
	--zui-lupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237b838d' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E");
	--zui-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
}
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--zui-ring: color-mix(in srgb, var(--zui-accent) 18%, transparent);
	}
}


/* ============================================================================
 * 1. Geschlossene Felder im Filterbereich
 * ========================================================================= */

/* --- select2, einfache Auswahl --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--single {
	height: var(--zui-h) !important;
	border: 1px solid var(--zui-line) !important;
	border-radius: var(--zui-radius) !important;
	background-color: var(--zui-bg) !important;
	box-shadow: var(--zui-shadow-sm) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 10px !important;
	padding-right: 30px !important;
	line-height: calc(var(--zui-h) - 2px) !important;
	color: var(--zui-text);
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--single :is(.select2-selection__placeholder, .placeholder) {
	color: var(--zui-muted) !important;
	opacity: 1;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0 !important;
	right: 3px !important;
	width: 24px !important;
	height: calc(var(--zui-h) - 2px) !important;
	background: var(--zui-chevron) center / 16px 16px no-repeat !important;
	transition: transform .15s ease;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre) .select2-container--default .select2-selection__arrow b {
	display: none !important;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre) .select2-container--open .select2-selection__arrow {
	transform: rotate(180deg);
}

/* --- select2, Mehrfachauswahl (Kategorien, Status …) --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--multiple {
	min-height: var(--zui-h) !important;
	padding: 2px 26px 2px 3px !important;
	border: 1px solid var(--zui-line) !important;
	border-radius: var(--zui-radius) !important;
	background: var(--zui-bg) var(--zui-chevron) right 7px top 6px / 16px 16px no-repeat !important;
	box-shadow: var(--zui-shadow-sm) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	cursor: pointer;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: block;
	padding: 0 !important;
	line-height: 22px !important;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin: 1px 4px 1px 1px !important;
	padding: 0 8px 0 6px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: var(--zui-fill-chip) !important;
	color: var(--zui-text) !important;
	font-size: .92em;
	line-height: 22px;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection__choice__remove {
	margin-right: 4px !important;
	color: inherit !important;
	font-weight: 600;
	opacity: .5;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection__choice__remove:hover {
	opacity: 1;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
	height: 22px !important;
	margin: 1px 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
/* mit gewählten Werten braucht das Feld keine eigene Zeile für das (unsichtbare) Suchfeld */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre) .select2-container--default .select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline {
	position: absolute;
	width: 1px;
	overflow: hidden;
	opacity: 0;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre) .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
	color: var(--zui-muted);
	opacity: 1;
}

/* --- native Auswahlfelder ohne select2 --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) select:where(:not([multiple], .select2-hidden-accessible)) {
	-webkit-appearance: none;
	appearance: none;
	height: var(--zui-h);
	padding: 0 28px 0 10px !important;
	border: 1px solid var(--zui-line) !important;
	border-radius: var(--zui-radius) !important;
	background: var(--zui-bg) var(--zui-chevron) right 7px center / 16px 16px no-repeat !important;
	box-shadow: var(--zui-shadow-sm);
	color: var(--zui-text);
	cursor: pointer;
}

/* --- Textfelder der Filterzeile, damit die Zeile einheitlich wirkt --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) input:where([type=text], [type=search], [type=number], [type=date], :not([type])):where(:not(.select2-search__field, #search_component_params_input, .inputsearch_dropdownselectedfields)) {
	height: var(--zui-h);
	margin-top: 1px;
	margin-bottom: 1px;
	padding: 0 9px !important;
	border: 1px solid var(--zui-line) !important;
	border-radius: var(--zui-radius) !important;
	background-color: var(--zui-bg) !important;
	box-shadow: var(--zui-shadow-sm);
	color: var(--zui-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre) input::placeholder {
	color: var(--zui-muted);
	opacity: 1;
}

/* --- Maus darüber --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default:not(.select2-container--disabled) :is(.select2-selection--single, .select2-selection--multiple):hover,
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) select:where(:not([multiple], .select2-hidden-accessible, :disabled)):hover,
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) input:where([type=text], [type=search], [type=number], [type=date], :not([type])):where(:not(.select2-search__field, #search_component_params_input, .inputsearch_dropdownselectedfields)):hover {
	border-color: var(--zui-line-hover) !important;
}

/* --- aktive Filter (Klasse setzt js/zehnerui.js): dunkler Rahmen, fette Schrift, Streifen in der Hausfarbe --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default.zui-aktiv :is(.select2-selection--single, .select2-selection--multiple),
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) select.zui-aktiv:where(:not([multiple], .select2-hidden-accessible)),
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) input.zui-aktiv:where(:not(.select2-search__field)) {
	border-color: var(--zui-line-strong) !important;
	box-shadow: inset 3px 0 0 var(--zui-accent), var(--zui-shadow-sm) !important;
}
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) .select2-container--default.zui-aktiv .select2-selection--single .select2-selection__rendered,
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) select.zui-aktiv,
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2) input.zui-aktiv {
	font-weight: 600;
}

/* --- Fokus / aufgeklappt: dunkler Rahmen + weicher Ring in der Hausfarbe --- */
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2):not(#zui3) :is(.select2-container--focus, .select2-container--open) :is(.select2-selection--single, .select2-selection--multiple),
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2):not(#zui3) select:where(:not([multiple], .select2-hidden-accessible)):focus,
:is(.liste_titre_filter, .liste_titre_bydiv, td.liste_titre, th.liste_titre):not(#zui1):not(#zui2):not(#zui3) input:where([type=text], [type=search], [type=number], [type=date], :not([type])):where(:not(.select2-search__field, #search_component_params_input, .inputsearch_dropdownselectedfields)):focus {
	border: 1px solid var(--zui-line-strong) !important;
	border-radius: var(--zui-radius) !important;
	box-shadow: 0 0 0 3px var(--zui-ring) !important;
	outline: none !important;
}


/* ============================================================================
 * 2. Aufgeklappte Liste (gilt überall)
 * ========================================================================= */

.select2-container--open:not(#zui1) .select2-dropdown {
	padding: 6px !important;
	border: 1px solid rgba(15, 23, 42, .12) !important;
	border-radius: 10px !important;
	background-color: var(--colorbackbody, #fff) !important;
	box-shadow: 0 14px 30px -8px rgba(15, 23, 42, .24), 0 4px 10px -4px rgba(15, 23, 42, .12) !important;
}
.select2-container--open:not(#zui1) .select2-dropdown--below {
	margin-top: 4px !important;
}
/* Listen am rechten Rand (Status) erben die Feldbreite (z. B. width125) — Wörter brachen
   mitten durch. Breite nach Inhalt, eldy-Mindestbreite 140 px bleibt. */
.select2-container--open:not(#zui1) span.select2-dropdown.onrightofpage {
	width: max-content !important;
	min-width: 140px !important;
	max-width: 320px !important;
}
.select2-container--open:not(#zui1) .select2-dropdown--above {
	margin-top: -4px !important;
}

/* Suchfeld oben in der Liste */
.select2-container--default:not(#zui1) .select2-search--dropdown {
	padding: 0 0 6px !important;
}
.select2-container--default:not(#zui1):not(#zui2) .select2-search--dropdown .select2-search__field {
	height: 32px !important;
	padding: 0 10px 0 32px !important;
	border: 1px solid var(--zui-line) !important;
	border-radius: 7px !important;
	background: var(--zui-bg) var(--zui-lupe) 10px center / 15px 15px no-repeat !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--zui-text);
}
.select2-container--default:not(#zui1):not(#zui2) .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--zui-line-strong) !important;
	box-shadow: 0 0 0 3px var(--zui-ring) !important;
}

/* Einträge */
.select2-container--default:not(#zui1) .select2-results__option {
	position: relative;
	min-height: 32px;
	box-sizing: border-box;
	margin: 1px 0;
	padding: 7px 10px !important;
	border-radius: 6px;
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: break-word;
}
.select2-container--default:not(#zui1) .select2-results__option[aria-selected=true] {
	background-color: transparent !important;
	color: var(--zui-text) !important;
	font-weight: 600;
}
/* Häkchen nur bei Mehrfachauswahl: bei einfacher Auswahl stünde es oft allein in der
   Leerzeile (leerer Wert 0 lässt sich per CSS nicht von „Entwurf“ = 0 unterscheiden) */
.select2-container--default:not(#zui1) .select2-results__options[aria-multiselectable=true] .select2-results__option[aria-selected=true] {
	padding-right: 32px !important;
}
.select2-container--default .select2-results__options[aria-multiselectable=true] .select2-results__option[aria-selected=true]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: var(--zui-accent);
	-webkit-mask: var(--zui-haken) center / contain no-repeat;
	mask: var(--zui-haken) center / contain no-repeat;
}
.select2-container--default:not(#zui1):not(#zui2) .select2-results__option--highlighted[aria-selected] {
	background-color: var(--zui-fill) !important;
	color: var(--zui-text) !important;
}
/* eldy färbt <span> im markierten Eintrag weiß (passend zum alten farbigen Balken) */
.select2-container--default:not(#zui1):not(#zui2) .select2-results__option--highlighted[aria-selected] span {
	color: inherit !important;
}
/* leerer Eintrag (Wert -1 oder leer = „kein Filter“ / „keine Angabe“): Strich statt Leerzeile.
   select2 hängt den Wert hinten an die id: …-result-ab12--1 bzw. …-result-ab12- */
.select2-container--default .select2-results__option:is([id$="--1"], [id$="-"])::before {
	content: "—";
	color: var(--zui-muted);
}
.select2-container--default:not(#zui1) .select2-results__option:is([id$="--1"], [id$="-"])[aria-selected=true] {
	font-weight: normal;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
	color: #a3aab3 !important;
	cursor: default;
}
.select2-container--default .select2-results__option .select2-results__group {
	padding: 8px 10px 4px !important;
	color: var(--zui-muted);
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.select2-container--default .select2-results__message {
	color: var(--zui-muted);
}