/*
 * Datumsauswahl — das Aussehen für App und Cockpit gemeinsam.
 *
 * Die Auswahl selbst liegt zweimal vor, weil die App mit Modulen läuft und das
 * Cockpit ohne (`web/js/ui.js` → datumWahl, `web/verwaltung/assets/datum.js` →
 * IRDatum). Das Aussehen darf deshalb nicht auch noch doppelt gepflegt werden:
 * Diese Datei ist die einzige Stelle, beide Seiten binden sie ein.
 *
 * Die Farben kommen aus der jeweiligen Umgebung. App und Cockpit benennen die
 * Linie unterschiedlich (--line-strong bzw. --rule), deshalb die verschachtelte
 * Rückfallkette — so passt sich das Feld an, ohne dass hier etwas zu wissen ist.
 */

.datum-wahl { display: grid; grid-template-columns: 4.5rem 1fr 6rem; gap: 8px; }
.datum-wahl.ohne-tag { grid-template-columns: 1fr 6rem; }

.datum-wahl select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, var(--rule, #E2E1E0));
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  background: var(--card, #fff);
  color: var(--ink, #1F2328);
}

.datum-wahl select:focus-visible {
  outline: 2px solid var(--ir-red, var(--akzent, #E2001A));
  outline-offset: 1px;
}

/* Auf schmalen Geräten stehen die drei Listen gleich breit nebeneinander. */
@media (max-width: 480px) { .datum-wahl { grid-template-columns: 1fr 1fr 1fr; } }