/* =============================================================
   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;
}


/* ── Keine Tabelle ragt aus ihrem Kasten (29.09.2026) ──────────
   Gemeldet an der Kontenliste der Verwaltung: die Spalte "Registered" und
   die Zeilenmenüs standen rechts über den Rahmen hinaus. Ursache sind zwei
   Regeln, die einzeln vernünftig sind: ab 820 px ist der Kasten nicht mehr
   rollbar (damit die Zeilenmenüs nicht abgeschnitten werden, siehe oben),
   und die Tabelle ist so breit wie ihr Inhalt verlangt. Zehn Spalten mit
   Kopfzeilen, die nicht umbrechen durften, und Filterfeldern mit fester
   Mindestbreite verlangten mehr, als selbst bei 1920 px Platz war.

   Die Lösung hat zwei Stufen, und beide richten sich nach dem Kasten, nicht
   nach dem Fenster, weil derselbe Baustein im Seitenraster, in Reitern und in
   Dialogen verschieden breit ist:

   1. Die Tabelle wird nachgiebig. Kopfzeilen, Namen und Adressen dürfen
      umbrechen, Filterfelder schrumpfen mit.
   2. Wo es danach immer noch nicht reicht, wird sie zur Kartenliste, wie
      bisher schon unter 700 px Fensterbreite. Seitliches Rollen gibt es
      damit nirgends mehr, auch nicht zwischen 700 und 820 px, wo es bisher
      die Zeilenmenüs abschnitt. */
.aophc-tablewrap {
  container: aophc-table / inline-size;
}

.aophc-table {
  min-width: 0;
}

.aophc-table th,
.aophc-table td {
  padding-left: var(--sp-12);
  padding-right: var(--sp-12);
}

.aophc-table thead th {
  white-space: normal;
}

.aophc-person-name {
  white-space: normal;
}

.aophc-cell-mail,
.aophc-table td a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Stufe 2. Die Schwelle ist die frühere Mindestbreite der Tabelle; breitere
   Tabellen legen darunter eine eigene fest (siehe aop-hub-admin.css). Die
   Regeln wiederholen die Kartenansicht aus aop-hub.css 12.5 wörtlich, dort
   hängen sie an der Fensterbreite. */
@container aophc-table (max-width: 719px) {
  .aophc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .aophc-table tr {
    display: block;
    padding: var(--sp-16) 0;
    border-bottom: 1px solid var(--color-white-8);
  }
  .aophc-table tbody tr:last-child { border-bottom: 0; }
  .aophc-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    padding: var(--sp-8) var(--sp-16);
    border-bottom: 0;
  }
  .aophc-table td::before {
    content: attr(data-label);
    font-family: var(--font-heading);
    font-weight: var(--fw-label);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white-70);
    flex: 0 0 auto;
  }
  .aophc-table .aophc-cell-actions {
    width: auto;
    justify-content: flex-end;
  }
  .aophc-table .aophc-cell-actions::before { content: none; }
}

/* ═════════════════════════════════════════════════════════════
   Developer Scorecard: Fragen je Kriterium (David 30.09.2026)
   ═════════════════════════════════════════════════════════════
   Die Developer Scorecard zeigt aufgeklappt wie die Extension Scorecard,
   was gefragt wurde: je Frage eine Zeile, die Antwort des Entwicklers
   direkt darunter. Die Extension hat je Kriterium einen Satz, dort
   bleibt .aoph-scorecard-statement aus aop-hub.css. */
.aoph-scorecard-questions {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 0 0 0 var(--sp-16);
  list-style: disc;
  font-family: var(--font-body);
  font-size: var(--text-14);
  line-height: 1.6;
  color: var(--color-white-70);
}
.aoph-scorecard-row--toggle.is-open .aoph-scorecard-questions { display: block; }
.aoph-scorecard-question { margin: 0 0 var(--sp-4); }
.aoph-scorecard-question-text { display: block; }
.aoph-scorecard-question-answer {
  display: block;
  color: var(--color-white-85);
  white-space: pre-line;
}
/* Freitext, der zu keiner Frage gehoert, behaelt seine Absaetze. */
.aoph-scorecard-answer { white-space: pre-line; }

/* ── Developer-Seite: Reihenfolge seit 01.10.2026 (David) ──
   Statistik, Score und Historie stehen jetzt VOR der Extension-
   Uebersicht, die Uebersicht ist der letzte Block vor dem Footer.
   Der grosse Fussabstand wandert deshalb vom gated-Bereich zur
   Uebersicht. */
.aoph-gated:not(.is-locked) { padding-bottom: 0; }
.aophd-extensions { padding-bottom: var(--sp-section-md); }

/* ── Upload-Fortschritt (David 05.10.2026) ──
   Feste Kachelleiste unten rechts, eine Zeile je laufendem Upload.
   Gebaut von uploadProgressItem() in aop-hub-shared.js. */
.aoph-uploads {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 340px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.aoph-uploads:empty { display: none; }
.aoph-upload {
  pointer-events: auto;
  padding: 12px 14px;
  border: 1px solid var(--color-white-15);
  border-radius: 8px;
  background: var(--color-light-blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}
.aoph-upload-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.aoph-upload-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aoph-upload-pct {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--color-white-70);
}
.aoph-upload-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--color-white-8);
  overflow: hidden;
}
.aoph-upload-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--color-teal);
  transition: width 0.2s linear;
}
.aoph-upload-meta {
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-white-70);
}
.aoph-upload.is-done .aoph-upload-pct { color: var(--color-teal); }
.aoph-upload.is-failed { border-color: var(--color-error-on-dark); }
.aoph-upload.is-failed .aoph-upload-fill { background: var(--color-error-on-dark); }
.aoph-upload.is-failed .aoph-upload-pct,
.aoph-upload.is-failed .aoph-upload-meta { color: var(--color-error-on-dark); }
@media (max-width: 600px) {
  .aoph-uploads { right: 16px; left: 16px; bottom: 16px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aoph-upload-fill { transition: none; }
}