/* =============================================================
   AOP HUB, BEDIENELEMENTE
   =============================================================
   Geladen von allen aop-hub-* Seiten, nach aop-hub.css.

   Zwei Themen: was der Browser selbst zeichnet (Auswahllisten, Datumsfelder)
   und die Tabellen der Verwaltung. Beides sind Stellen, an denen die
   eingefrorenen Stilvorlagen nichts vorsahen, weil der Prototyp sie nicht
   hatte.

   ══════════════════════════════════════════════════════════════════
   TEIL 1: WAS DER BROWSER ZEICHNET
   ══════════════════════════════════════════════════════════════════

   DAS PROBLEM
   -----------
   Bei einem <select> zeichnet unser CSS nur das geschlossene Feld. Die
   aufgeklappte Liste zeichnet das Betriebssystem, und das nimmt dafür sein
   helles Standardaussehen — auf Windows also weiß. Unsere Beschriftungen
   sind weiß. Ergebnis: eine Liste, die man nur lesen kann, indem man mit der
   Maus darüberfährt und die Markierung wandern lässt.

   Dasselbe trifft die sieben Datumsfelder: der Platzhalter "dd.mm.yyyy" und
   das Kalendersymbol kommen vom Browser und waren schwarz auf dunkelblau.

   DIE LÖSUNG
   ----------
   `color-scheme: dark` sagt dem Browser, dass er seine eigenen Teile dunkel
   zeichnen soll. Eine Zeile, und sie wirkt auf alles, was wir nicht selbst
   malen: Auswahllisten, Kalender, Zeitfelder, Bildlaufleisten innerhalb des
   Elements.

   WARUM NICHT AUF :root
   ---------------------
   Weil das jedes native Element aller Seiten umstellen würde, auch auf den
   fünf Prototyp-Seiten, deren Erscheinungsbild eingefroren ist. Hier steht es
   deshalb auf den Elementen, die es brauchen, und der Paritätstest bei
   Toleranz null bestätigt, dass sich sonst nichts verschoben hat.

   Die `option`-Regeln darunter sind der Gürtel zum Hosenträger: ältere
   Browser und einige Linux-Umgebungen werten `color-scheme` nicht aus,
   nehmen aber Farben am `option` an. Beides zusammen deckt jeden Fall ab,
   den dieses Projekt trifft.
   ============================================================= */

select.input--dark,
input.input--dark[type="date"],
input.input--dark[type="datetime-local"],
input.input--dark[type="month"],
input.input--dark[type="time"],
input.input--dark[type="number"] {
  color-scheme: dark;
}


/* Die Einträge der aufgeklappten Liste.
   --color-dark-blue statt --gradient-tile-dark: ein Verlauf lässt sich auf
   einem <option> nicht darstellen, und ein halb angewandter Verlauf sähe
   schlechter aus als eine saubere Fläche. */
select.input--dark option {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

/* Ein nicht wählbarer Eintrag, etwa "Bitte wählen". Gedämpft, aber nicht so
   schwach, dass er im Kontrast durchfällt. --color-white-70 ist das
   schwächste Weiß, das tokens.css für Text vorsieht. */
select.input--dark option:disabled {
  color: var(--color-white-70);
}


/* ═════════════════════════════════════════════════════════════
   TEIL 2: DIE TABELLEN DER VERWALTUNG
   ═════════════════════════════════════════════════════════════ */


/* ── Das Zeilenmenü muss aus dem Kasten heraus ─────────────────
   `.aophc-tablewrap` trägt `overflow-x: auto`, damit eine breite Tabelle auf
   schmalen Fenstern seitlich rollt statt die Seite zu sprengen. In CSS zieht
   das aber die SENKRECHTE Achse mit: eine Achse auf `auto` hebt die andere
   von `visible` auf `auto`.

   Folge: das aufgeklappte Zeilenmenü ragte 150 px über den Kasten hinaus, der
   Kasten bekam einen eigenen Rollbalken, und das Menü war halb abgeschnitten.
   Genau so wurde es gemeldet — "die Actions sieht man kaum".

   Ab 820 px braucht es das seitliche Rollen nicht: die Tabelle hat
   `min-width: 720px`, darunter greift ab 700 px ohnehin die Kartenansicht.
   Zwischen 700 und 820 px bleibt es beim alten Verhalten; dort ist das
   seitliche Rollen der Zweck der Regel, und ein Menü am Rand ist der
   seltenere Fall. */
@media (min-width: 820px) {
  .aophc-tablewrap { overflow: visible; }
}


/* ── Mehr Luft in den Zeilen ───────────────────────────────────
   Der Prototyp hatte diese Tabellen nicht; sie sind aus den vorhandenen
   Bausteinen entstanden und haben deren enge Maße geerbt. Für eine Liste, in
   der Advancis täglich arbeitet, ist das zu gedrängt.

   Nur in der Verwaltung und im Portal, nicht global: die eingefrorenen
   Seiten bleiben unberührt, und der Paritätstest bestätigt das. */
.aophc-table th,
.aophc-table td {
  padding: var(--sp-20) var(--sp-16);
}

.aophc-table td {
  font-size: var(--text-15);
}


/* ── Die Aktionen sichtbar machen ──────────────────────────────
   Der Knopf war randlos und durchsichtig; erst beim Überfahren mit der Maus
   erschien ein Rahmen. Wer nicht wusste, dass dort etwas ist, fand es nicht —
   und auf einem Berührungsbildschirm gibt es kein Überfahren.

   Jetzt trägt er dauerhaft einen zurückhaltenden Rahmen. Der Zustand beim
   Überfahren bleibt, wie er war, damit die Rückmeldung erhalten bleibt. */
.aophc-rowmenu-btn {
  border-color: var(--color-white-15);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .aophc-rowmenu-btn:hover {
    border-color: var(--aop-teal);
  }
}


/* ── Der Name führt zur Detailseite ────────────────────────────
   In den Verwaltungstabellen ist der Name der Eintrag selbst, also führt er
   dorthin, wo der Eintrag steht. Ohne Farbe und ohne Unterstreichung im
   Ruhezustand: eine ganze Spalte blauer, unterstrichener Namen wäre
   unruhiger als die Tabelle verträgt. Beim Überfahren und bei Tastaturfokus
   zeigt sich der Verweis.

   `color: inherit` ist nötig, weil ein <a> sonst die Browserfarbe nimmt —
   dieselbe Ursache wie bei den Auswahllisten in Teil 1. */
.aophc-rowlink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .aophc-rowlink:hover {
    color: var(--aop-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.aophc-rowlink:focus-visible {
  outline: 2px solid var(--aop-teal);
  outline-offset: 2px;
  border-radius: 2px;
}