/* Unternehmenszinssätze — was allein diese Seite betrifft.
 *
 * Tafel, Bausteine und der Aufbau der einfachen Seiten stehen in
 * `gemeinsam/`; hier steht nur die Zinssatztabelle und was an ihr anklickbar
 * ist. Eine Farbe wird nicht hingeschrieben, sondern aus der Tafel geholt —
 * sonst folgte sie der dunklen Fassung nicht.
 */

/* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
   Übersicht — derselbe Ton, den `icon.svg` bereits trägt. Die Kopfleiste holt
   ihn sich daraus; alles übrige bleibt bei `--primaer`. */
:root {
  --ton-app: var(--ton-violett);
}

/* Die Tabelle führt Zahlen: rechtsbündig, mit gleich breiten Ziffern, damit
   die Kommastellen untereinander stehen. */
#zinsen table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#zinsen table th {
  text-align: center;
}

/* Die Datumsspalte ist keine Zahl, sie ist die Zeile selbst — Kopf und
   Zellen stehen deshalb links. */
#zinsen table td:first-child,
#zinsen table th:first-child {
  text-align: left;
  white-space: nowrap;
}

/* Jede zweite Zeile abgesetzt — bei zwanzig Zeilen Zahlen verrutscht der Blick
   sonst in die Nachbarzeile. Gemischt statt gemalt, damit es in beiden
   Fassungen trägt. */
#zinsen table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

#zinsen article {
  border-left: 3px solid var(--primaer);
}

#textToCopy {
  margin-bottom: 1rem;
}

/* ------------------------------------------------- Die anklickbaren Zellen */

/* Ein Zinssatz ist ein Schalter: der erste Klick setzt den Anfang des
   Zeitraums, der zweite in derselben Spalte das Ende. */
.rate-cell {
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms;
}

.rate-cell:empty {
  cursor: default;
}

.rate-cell:not(:empty):hover {
  background: color-mix(in srgb, var(--warnung) 22%, transparent);
}

/* Was gewählt ist, trägt die Grundfarbe — kräftig genug, um über der
   Zebrastreifung zu stehen. */
.rate-cell.selected {
  background: var(--primaer);
  color: var(--auf-farbe);
  font-weight: 600;
}