/* ============================================================ Custom dropdown (shadcn Select) — see dropdown.js ============================================================ */ /* Hide the native per ID eine Breite oder margin:auto geben (z. B. für die Ausgabe-Auswahl), schoben dieses unsichtbare Feld sonst weit nach rechts und machten die ganze Seite seitlich verschiebbar (2026-08-13). */ min-width: 0 !important; max-width: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0; border: 0; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } .cs { position: relative; display: inline-block; vertical-align: middle; } .cs-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; height: 2.25rem; padding: 0 0.5rem 0 0.75rem; font-size: 0.875rem; font-weight: 400; font-family: inherit; color: var(--text-strong); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); cursor: pointer; text-align: left; white-space: nowrap; transition: border-color .15s, box-shadow .15s, background-color .2s; } /* keep it input-like (override the generic button hover) */ .cs-trigger:hover { background: var(--input-bg); border-color: var(--text-faint); } /* subtle focus — NO large glow */ .cs-trigger:focus-visible, .cs.cs-open .cs-trigger { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); } .cs-trigger[disabled] { opacity: .5; cursor: not-allowed; background: var(--input-bg); } .cs-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-label.cs-placeholder { color: var(--text-faint); } .cs-chevron { flex: none; display: inline-flex; color: var(--text-faint); transition: transform .15s; } .cs.cs-open .cs-chevron { transform: rotate(180deg); } /* Menu (portalled to ) */ .cs-menu { position: fixed; z-index: 1100; min-width: 8rem; max-width: min(28rem, calc(100vw - 16px)); max-height: 16rem; overflow-y: auto; padding: 4px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-body); animation: cs-in .12s cubic-bezier(.2,.7,.2,1) both; } @keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* In-menu keyword search (long lists) — pinned to the top while the options scroll */ .cs-search { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 6px; margin: -4px -4px 4px; padding: 6px 8px; background: var(--card-bg); border-bottom: 1px solid var(--card-border); } .cs-search svg { flex: none; color: var(--text-faint); } .cs-search-input { flex: 1 1 auto; min-width: 0; padding: 2px 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 0.875rem; color: var(--text-strong); } .cs-search-input::placeholder { color: var(--text-faint); } .cs-empty { padding: 10px 8px; font-size: 0.85rem; color: var(--text-faint); text-align: center; } /* Zwischenüberschrift einer Gruppe () — z. B. das Produkt über seinen Coupons. */ .cs-group { padding: 8px 8px 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .cs-group + .cs-option { margin-top: 0; } .cs-option { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 6px; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text); cursor: pointer; line-height: 1.35; } .cs-option.cs-active { background: var(--accent); color: var(--accent-foreground); } .cs-option[aria-selected="true"] { font-weight: 600; color: var(--text-strong); } .cs-option.cs-disabled { opacity: .45; cursor: not-allowed; } .cs-check { flex: none; width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-strong); } .cs-opt-label { flex: 1 1 auto; } /* Fähnchen an einem Eintrag (