/* Bedienelemente im Hausstil -- gemeinsam fuer index.html und admin.html.
   Gehoert zu hausstil.js; das eine ohne das andere tut nichts.

   WARUM EINE EIGENE DATEI und nicht zweimal im <style> der beiden Seiten:
   ein Auswahlfeld, das auf der Website anders aussieht als im CRM, faellt
   sofort auf -- und zwei Kopien laufen nach der zweiten Aenderung
   auseinander. Die Datei liegt im selben Eimer wie alles andere, kostet
   also keinen Fremdabruf.

   Die Farben kommen aus den Variablen der jeweiligen Seite (--card,
   --border, --accent ...). Beide Seiten definieren dieselben Namen, also
   passt sich das hier von allein an. */

/* ===================================================== Auswahl (statt select)

   Ein natives <select> zeichnet das Betriebssystem, nicht die Seite: auf
   Windows ein weisser Kasten mit blauer Markierung, mitten in einer
   dunklen Seite. Auf einem deutschen Rechner steht in der Datumsauswahl
   sogar «Löschen» und «Heute» -- auf einer russischen Kundenseite.

   Das <select> bleibt trotzdem im Dokument stehen (nur unsichtbar): es
   traegt den Wert, es wird abgeschickt, und aller vorhandene Code, der
   `.value` liest oder auf `change` hoert, funktioniert unveraendert
   weiter. Hier kommt nur eine Bedienflaeche darueber. */

.wahl-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wahl {
    position: relative;
}

.wahl-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.wahl-knopf:hover { border-color: rgba(255, 138, 30, .45); }
.wahl.offen > .wahl-knopf { border-color: var(--accent); }

.wahl-wert {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wahl-pfeil {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: var(--transition);
}

.wahl.offen .wahl-pfeil {
    transform: rotate(-135deg) translate(-2px, -2px);
    border-color: var(--accent);
}

.wahl-liste {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    max-height: 264px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

/* Nach oben ausweichen, wenn unten kein Platz ist. Sonst steht die Liste
   halb ausserhalb des Fensters und die letzten Eintraege sind
   unerreichbar -- im Buchungsfenster passiert genau das, weil das Feld
   ziemlich weit oben sitzt. */
.wahl-liste.nach-oben {
    top: auto;
    bottom: calc(100% + 6px);
}

.wahl-eintrag {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.4;
    cursor: pointer;
}

.wahl-eintrag:hover,
.wahl-eintrag.betont {
    background: rgba(255, 138, 30, .12);
}

.wahl-eintrag[aria-selected="true"] {
    color: var(--accent-2);
    font-weight: 700;
}

.wahl-eintrag[aria-selected="true"]::after {
    content: '';
    float: right;
    width: 5px;
    height: 9px;
    margin: 4px 2px 0 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* ============================================================ Datumsauswahl

   Dasselbe Problem wie beim <select>, nur schlimmer: <input type="date">
   oeffnet den Kalender des Browsers, in der Sprache des Systems. Auf
   Davens Rechner stand darin «September 2026», «Mo Di Mi Do Fr Sa So»,
   «Löschen» und «Heute» -- in einem russischen CRM. */

.wahl-kal {
    position: absolute;
    left: 0;
    z-index: 60;
    top: calc(100% + 6px);
    width: 290px;
    max-width: calc(100vw - 32px);
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

.wahl-kal.nach-oben { top: auto; bottom: calc(100% + 6px); }

.wahl-kal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.wahl-kal-kopf strong {
    font-size: 14.5px;
    font-weight: 700;
}

.wahl-kal-pfeil {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: none;
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.wahl-kal-pfeil:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wahl-kal-pfeil:disabled { opacity: .35; cursor: default; }

.wahl-kal-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.wahl-kal-wtag {
    padding: 4px 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.wahl-kal-tag {
    padding: 8px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition);
}

.wahl-kal-tag:hover:not(:disabled) { background: rgba(255, 138, 30, .14); }
.wahl-kal-tag:disabled { color: var(--muted); opacity: .35; cursor: default; }
.wahl-kal-tag.heute { box-shadow: inset 0 0 0 1px var(--border); }

.wahl-kal-tag.gewaehlt {
    background: var(--accent);
    color: #14100a;
    font-weight: 800;
}

.wahl-kal-leer { visibility: hidden; }

/* Gesperrte Eintraege -- im CRM die schon vergebenen Uhrzeiten. Sie
   bleiben SICHTBAR und werden nicht weggelassen: dass 12:00 belegt ist,
   ist fuer den Mitarbeiter am Telefon eine Information. */
.wahl-eintrag.gesperrt {
    color: var(--muted);
    opacity: .5;
    cursor: default;
}
.wahl-eintrag.gesperrt:hover { background: none; }