/* Kopie aus dem pixCRM (assets/css/pixselect.css) – Änderungen dort UND hier nachziehen. */
/* pixSelect – global eingebundene Dropdown-Styles (eigene Datei, da kein components.css). */

/* ============================================================
   pixSelect – einheitliche, OS-unabhängige Dropdowns für <select>
   Wird per assets/js/pixselect.js auf alle <select> angewandt.
   Das native <select> bleibt als Datenquelle erhalten (.pixsel-native).
   ============================================================ */
.pixsel { position: relative; width: 100%; }
.pixsel-native {
	/* unsichtbares Overlay über dem Trigger: bleibt Submit-Quelle und verankert
	   die Browser-Validierung (required) an der sichtbaren Stelle; Klicks gehen
	   dank pointer-events:none an den Trigger.
	   Hiding-Eigenschaften mit !important, damit seiten-lokale Select-Styles
	   (z. B. .pix-select aus einer View, die NACH dieser Datei lädt) das native
	   Feld nicht wieder sichtbar machen – sonst „doppeltes" Feld inkl. OS-Pfeilen,
	   v. a. bei disabled-Selects. */
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	opacity: 0 !important; pointer-events: none !important;
	-webkit-appearance: none !important; appearance: none !important;
	background: transparent !important; box-shadow: none !important;
}
/* Trigger übernimmt die Optik von .input-standard */
.pixsel-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
	padding: 12px 16px; font-size: 0.95rem; line-height: 1.3; text-align: left;
	color: var(--pix-dark, #2d2a27); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.pixsel-trigger:hover { border-color: color-mix(in srgb, var(--pix-primary) 45%, #e0e0e0); }
.pixsel.is-open > .pixsel-trigger,
.pixsel-trigger:focus-visible {
	border-color: var(--pix-primary); outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pix-primary) 15%, transparent);
}
.pixsel-trigger.is-placeholder .pixsel-value { color: #9aa0a6; }
.pixsel-trigger:disabled { background: #f3f4f6; color: #9aa0a6; cursor: not-allowed; opacity: 0.75; }
.pixsel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pixsel-arrow { flex-shrink: 0; width: 13px; height: 13px; transition: transform 0.2s ease; }
.pixsel.is-open > .pixsel-trigger .pixsel-arrow { transform: rotate(180deg); }

/* Panel hängt am <body> -> position:fixed (kein Clipping in overflow:hidden Cards) */
.pixsel-panel {
	position: fixed; z-index: 2000; min-width: 160px; background: #fff;
	border: 1px solid #ececec; border-radius: 12px; padding: 6px;
	box-shadow: 0 14px 38px rgba(0,0,0,0.14); max-height: 280px; overflow-y: auto;
	overscroll-behavior: contain; opacity: 0; transform: translateY(-6px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}
.pixsel-panel.is-visible { opacity: 1; transform: translateY(0); }
.pixsel-opt {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
	font-size: 0.9rem; color: var(--pix-dark, #2d2a27); cursor: pointer; transition: background 0.12s;
}
.pixsel-opt.is-active { background: color-mix(in srgb, var(--pix-primary) 12%, transparent); }
.pixsel-opt.is-selected { font-weight: 700; color: var(--pix-primary); }
.pixsel-opt.is-selected::after { content: "\2713"; margin-left: auto; font-weight: 900; }
.pixsel-opt.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pixsel-optgroup-label {
	padding: 8px 12px 4px; font-size: 0.7rem; text-transform: uppercase;
	letter-spacing: 0.5px; color: #9aa0a6; font-weight: 800;
}
.pixsel-empty { padding: 14px 12px; text-align: center; color: #adb5bd; font-size: 0.85rem; }

/* Dark-Variante: Trigger fügt sich in dunkle Toolbars/Cards ein (weiße Schrift).
   Das aufklappende Panel bleibt hell und damit gut lesbar. */
.pixsel-on-dark > .pixsel-trigger {
	background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff;
}
.pixsel-on-dark > .pixsel-trigger:hover { border-color: rgba(255,255,255,0.40); }
.pixsel-on-dark > .pixsel-trigger.is-placeholder .pixsel-value { color: rgba(255,255,255,0.55); }
.pixsel.is-open.pixsel-on-dark > .pixsel-trigger,
.pixsel-on-dark > .pixsel-trigger:focus-visible {
	border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}
