/* --- Ergänzungen für Seiten ---------------------------------------------------------------- */

/* Karte als Link, z. B. Bereiche der Admin-Übersicht. */
.card--link {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ease), background-color var(--ease);
}

.card--link:hover {
  border-color: var(--border-strong);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-pill);
  color: var(--accent);
}

.card__head--padded {
  padding: var(--space-5) var(--space-5) var(--space-3);
}

/* Erklärender Satz zwischen Kartenkopf und Tabelle in einer randlosen Karte. Er gehört über
   die Tabelle: Unter 100 Zeilen gelesen zu werden heißt, gar nicht gelesen zu werden
   (DESIGN 5 „Karte“, ergänzt nach dem Review zu AP 3.1). */
.card--flush .card__note {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  color: var(--text-2);
}

.error-card {
  max-width: 640px;
  margin: var(--space-8) auto;
}

.check-list {
  display: grid;
  gap: var(--space-3);
  color: var(--text-2);
}

.check-list li {
  display: flex;
  gap: var(--space-3);
}

.check-list .icon {
  margin-top: 2px;
  color: var(--pos-soft);
}

.notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-input);
  background: var(--surface-input);
  color: var(--text-2);
  white-space: pre-wrap;
}

/* Inhalte einer Tabellenzelle nebeneinander, z. B. Zustand und kleine Knöpfe (Admin). */
.cell-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  white-space: nowrap;
}

.cell-actions--end {
  justify-content: flex-end;
}

/* Symbol und Knopf dicht beieinander (Ä-107: „Backtest“ unter der Rolle in der Nutzerliste), damit die
   Tabelle bei 1440 px samt Aktionen in die Karte passt. */
.cell-actions--tight {
  gap: var(--space-1);
}

/* Zwei Knöpfe untereinander (Ä-84: „Wiederherstellen“ über „Jetzt endgültig löschen“), damit
   die Zeile bei 1440 px in die Karte passt. */
.cell-actions--stack {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

@media (width < 640px) {
  .cell-actions--stack {
    align-items: flex-start;
  }
}

/* Kleine Auswahl in einer Tabellenzeile (Ä-32: Rolle in der Nutzerliste) – so hoch wie die
   kleinen Knöpfe daneben, nur so breit wie ihr längster Eintrag. */
.input--sm {
  width: auto;
  min-width: 128px;
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

select.input--sm {
  padding-right: 34px;
  background-position: right 10px center;
}

/* Häkchen-Tabelle (DESIGN 5, Ä-32: Freigabe je Algorithmus): je Spalte ein Ankreuzfeld, mittig
   unter seiner Überschrift; in der Listendarstellung links neben dem Namen der Spalte. */
.check-cell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.check-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
  cursor: pointer;
}

.cell-actions form {
  display: contents;
}

@media (width < 700px) {
  .cell-actions--end {
    justify-content: flex-start;
  }
}

/* Blätterleiste unter einer Tabelle (Admin-Protokoll). */
.pager {
  padding: var(--space-3) var(--space-4);
}

.pager__controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Filterleiste im Kartenkopf (Admin-Protokoll). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.filter-bar .input {
  width: auto;
  min-width: 170px;
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 0.8125rem;
}

.filter-bar select.input {
  padding-right: 34px;
  background-position: right 10px center;
}

/* Gruppe aus Beschriftung und zwei Feldern (z. B. „Handelstag von/bis“, AP 1.6). Sie bleibt
   zusammen und rückt auf schmalen Bildschirmen in eine eigene Zeile; sonst stünde die
   Beschriftung neben dem vorigen Feld und sähe aus, als gehörte sie dorthin. */
.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Beschriftung und Feld gehören zusammen und brechen gemeinsam um – sonst stünde „bis“ am Ende
   einer Zeile und sein Feld in der nächsten. */
.filter-bar__pair {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Kurzbeschriftung unmittelbar vor einem Feld („von“, „bis“). Sie steht sichtbar zwischen den
   Feldern: Zwei gleich aussehende Datumsfelder wären sonst nur über den Hinweistext zu
   unterscheiden – und auf schmalen Bildschirmen, wo das zweite Feld umbricht, gar nicht. */
.filter-bar__label {
  color: var(--text-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}

@media (width < 700px) {
  .filter-bar__group {
    flex-basis: 100%;
  }
}

/* Wiederherstellungscodes: gleichmäßiges Raster aus Tastenkappen. */
.code-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.code-list .kbd {
  display: block;
  text-align: center;
}

/* QR-Code der Zwei-Faktor-Einrichtung: heller Grund, damit Kameras ihn sicher erkennen. */
.qr-code {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  padding: var(--space-3);
  border-radius: var(--r-tile);
  background: #ffffff;
}