/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   MENÜ UND AUSWAHL-LISTE — das schwebende Popup an einem Anker, und die
   geöffnete Liste eines Auswahlfelds.
       <button class="kebab" aria-haspopup="true">⋮</button>
       <div class="menu" hidden>
         <button class="menu-item">Bearbeiten</button>
         <button class="menu-item danger">Löschen</button>
       </div>
   Die Position setzt das JavaScript beim Öffnen aus dem Anker. Die
   Auswahl-Liste (.cs*) baut customselect.js um jedes <select class="auswahl">:
   Das native Feld bleibt Wert- und Formularträger und feuert weiter
   'change'; die Anzeige übernimmt ein Trigger im Look des geschlossenen
   Feldes, die Liste ist dieses Menü. Sonst malte die geöffnete Liste das
   Betriebssystem — auf jedem Rechner anders, im dunklen Werkzeug ein Loch
   im Bild, und `color-scheme` erreicht sie nicht. */

/* Ebene 1100: über den Dialogen — ein Auswahlfeld IM Dialog muss sein
   Popup darüber öffnen können. */
.menu {
    position: fixed;
    z-index: 1100;
    min-width: 168px;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
    padding: var(--abstand-4);
    display: flex;
    flex-direction: column;
    /* Luft zwischen den Einträgen: Die Hervorhebung des Gewählten und der
       Hover des Nachbarn sind zwei gefüllte, gerundete Flächen — ohne
       Abstand backen sie zu einem Klumpen zusammen. */
    gap: 2px;
}
.menu[hidden] { display: none; }

.menu-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: var(--abstand-8) var(--abstand-12);
    border-radius: var(--rundung-mittel);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    cursor: pointer;
    white-space: nowrap;
}
.menu-item:hover,
.menu-item.is-active { background: var(--flaeche-betont); }   /* Zeiger und Tastatur-Hervorhebung */
.menu-item.danger { color: var(--fehler); }
.menu-item.danger:hover { background: color-mix(in srgb, var(--fehler) 12%, transparent); }

/* Ein gesperrter Eintrag: ausgegraut, und die Tastatur übergeht ihn. Ein
   disabled-<button> feuert keinen Klick, aber :hover greift trotzdem —
   darum die Rücknahme. */
.menu-item.is-disabled { color: var(--text-leise); cursor: default; }
.menu-item.is-disabled:hover { background: transparent; }

/* Der Kebab (⋮) — randloser, kompakter Auslöser. Ohne den 34-px-Boden des
   Knopfs, der eine Tabellenzeile in die Höhe zöge; dickere Punkte durch
   größere, fettere Glyphe. */
.kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-gedaempft);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-lg);
    font-weight: var(--gewicht-fett);
    line-height: 1;
    border-radius: var(--rundung-mittel);
    cursor: pointer;
}
.kebab:hover { background: var(--flaeche-betont); color: var(--text); }

/* ══ AUSWAHL-LISTE ══ das Dropdown, geöffnet */

/* Das aufgerüstete native Feld: unsichtbar, aber im DOM und im Formular. */
select.cs-native { display: none; }

/* Sitzt das Feld in einer .auswahl-huelle, übernimmt der Trigger den Chevron —
   der Pfeil der Hülle geht aus, sonst stünden zwei übereinander. */
.auswahl-huelle.cs-host::after { display: none; }

.cs { position: relative; display: block; width: 100%; }

/* Der Trigger trägt wörtlich die Werte des geschlossenen Feldes (forms.css):
   ein Feld, zwei Zustände, eine Optik. */
.cs-trigger {
    position: relative;
    width: 100%;
    text-align: left;
    background: var(--eingabe);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    color: var(--text);
    /* Ein <button> erbt die Schrift nicht von sich aus. */
    font-family: inherit;
    font-size: var(--schrift-sm);
    padding: var(--abstand-6) 32px var(--abstand-6) var(--abstand-10);
    min-height: 34px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease;
}
.cs-trigger::after {                              /* Chevron — dieselbe gedrehte Ecke wie .auswahl-huelle */
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5.5px;
    height: 5.5px;
    border-right: 1.25px solid var(--text-gedaempft);
    border-bottom: 1.25px solid var(--text-gedaempft);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.cs-trigger:focus { outline: none; border-color: var(--akzent); }

/* Gesperrt wie das Feld: ohne Deckkraft. Das JavaScript spiegelt das
   disabled des nativen Feldes auf den Trigger. */
.cs-trigger:disabled {
    background: var(--linie-zart);
    color: var(--text-gedaempft);
    opacity: 1;
    cursor: not-allowed;
}

/* Versteckt jemand das Feld (hidden), verschwindet die ganze Aufrüstung
   mit — Trigger und Hülle. Die Regel in forms.css greift nach der
   Aufrüstung nicht mehr, weil .cs als Zwischenschicht dazwischenrückt. */
.cs:has(> .cs-native[hidden]) { display: none; }
.auswahl-huelle.cs-host:has(.cs-native[hidden]) { display: none; }

/* Lange Listen scrollen im Popup statt den Schirm zu fluten. */
.cs-pop { max-height: 280px; overflow-y: auto; }

/* Der aktuell gewählte Wert in der offenen Liste. */
.menu-item.is-sel { color: var(--akzent); }