/**
 * Feedback-Bereich (/feedback) – Tabelle, Sterne, eigene Abgaben.
 *
 * ⚠ NUR DIESE SEITE LAEDT DIE DATEI. Die Grundbauteile (`.ja-card`, `.ja-btn`,
 * `.ja-main`, `.ja-note`) kommen aus `jira_addon.css`, das die Seite ebenfalls
 * einbindet – das ist faktisch das gemeinsame Bereichsseiten-CSS. Was hier
 * steht, ist ausschliesslich das Tabellen- und Sterne-Spezifische.
 *
 * ⚠ KEINE KLASSE AUS `style.css` BENUTZEN (`.btn-primary`, `.input-group`,
 * `.form-group`): die Datei wird hier nicht geladen, ein solcher Knopf waere
 * ein nackter Browser-Standardknopf. Das ist im Projekt schon dreimal
 * passiert (Register).
 */

/* ── Formularauswahl ───────────────────────────────────────────────────── */
.fb-pick {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.fb-pick label { font-size: .85rem; color: var(--text-secondary); flex: 0 0 auto; }
.fb-pick select {
    flex: 1 1 220px; min-width: 0;         /* ohne min-width sprengt ein langer
                                              Titel die Zeile (Register) */
    max-width: 420px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    /* Deckende Flaeche: die Optionsliste liegt ueber Text. Ohne sie steht in
       manchen Browsern weisse Schrift auf Weiss (Register). */
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: .9rem; font-family: inherit;
}
.fb-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Die Tabelle ───────────────────────────────────────────────────────── */
/* Der Container scrollt WAAGERECHT, die Seite nicht: bei zwoelf Spalten passt
   die Tabelle auf kein Telefon, und eine Seite mit waagerechtem Ueberlauf ist
   unbedienbar. */
.fb-tab-wrap { overflow-x: auto; margin: 0 0 12px; }

/* ⚠ BESTANDSFEHLER, gefunden bei der optischen Abnahme am 2026-09-15: auf
   `/feedback` gab es GAR KEINE `.hidden`-Regel. `.hidden { display: none }`
   steht nur in `chat.css`, und die laedt diese Seite nicht – `classList.add
   ('hidden')` war damit wirkungslos. Betroffen waren die Formular-Auswahl
   `#fb-pick` (sichtbar, obwohl es nur EIN Formular gibt), der Ladezustand von
   `#fb-app` und der „+ Zeile"-Knopf bei festen Zeilen.

   Ein jsdom-Waechter kann das strukturell nicht sehen: die KLASSE ist gesetzt,
   nur gemalt wird trotzdem. Gesehen hat es der Screenshot.

   `!important`, weil die versteckten Elemente eigene `display`-Werte tragen
   (`.ja-btn` ist `inline-flex`, `.fb-pick` ist `flex`) und eine Klassenregel
   sonst gleich stark waere – dieselbe Falle wie `.sp-row[hidden]` in `/sap`
   (Register). */
.hidden { display: none !important; }

.fb-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }

.fb-tab th, .fb-tab td {
    padding: 8px 10px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.fb-tab th {
    font-weight: 600; font-size: .82rem; color: var(--text-secondary);
    white-space: nowrap;
    /* Deckende Flaeche am klebenden Kopf – halbtransparent schiene die Zeile
       darunter durch (Register: Audit-Log). */
    position: sticky; top: 0; z-index: 1;
    background-color: var(--bg-secondary);
}
.fb-tab tr:last-child td { border-bottom: 0; }

/* Zeilennummer und Loeschknopf sollen nicht mitwachsen. */
.fb-tab th.fb-c-nr, .fb-tab td.fb-c-nr {
    width: 1%; white-space: nowrap; color: var(--text-muted); font-size: .8rem;
}
.fb-tab th.fb-c-akt, .fb-tab td.fb-c-akt { width: 1%; white-space: nowrap; }

/* ⚠ DIE FESTE ZELLE IST INHALT, KEINE BESCHRIFTUNG – deshalb
   `--text-primary` und halbfett, nicht `--text-muted`: sie traegt die Frage,
   auf die sich die Bewertung daneben bezieht, und wird GELESEN. Gedaempft
   liegt sie in beiden Themen unter 4,5:1 (Register).
   Kein `white-space: nowrap`: ein Kriterium ist ein Satz und soll umbrechen,
   statt die Tabelle breiter zu machen als das Fenster. */
.fb-tab td.fb-c-fest {
    color: var(--text-primary); font-weight: 600;
    max-width: 22em; overflow-wrap: anywhere;
}
/* In einem Bogen mit festen Zeilen ist die erste Spalte die Frage – sie darf
   den Eingabefeldern nicht den Platz nehmen. */
.fb-tab.is-fest td.fb-c-fest { width: 30%; }

/* ── Antwortfeld ───────────────────────────────────────────────────────────
   ⚠ MEHRZEILIG (Vorgabe des Betreibers 2026-09-16). Es war ein
   `input[type="text"]`; die Regel dafuer ist ERSATZLOS weg, weil es in `.fb-tab`
   kein einziges Textfeld mehr gibt – eine Regel ohne Gegenstand muesste bei
   jeder Durchsicht mitgeprueft werden (Register). Die Felder des Admin-Editors
   (`.fb-sp`, `.fb-z`) liegen NICHT in einer `.fb-tab` und sind unberuehrt. */
.fb-tab textarea {
    width: 100%; box-sizing: border-box; min-width: 140px;
    padding: 6px 9px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-glass); color: var(--text-primary);
    font-size: .9rem; font-family: inherit;
    /* `inherit` waere `normal` – in einer `textarea` rechnet der Browser die
       Hoehe aus `rows` MAL Zeilenhoehe; ohne festen Wert weicht sie je nach
       Schrift ab, und `rows="2"` waere mal zwei, mal anderthalb Zeilen hoch. */
    line-height: 1.45;
    /* Waagerecht ziehen wuerde die Tabellenspalte sprengen; senkrecht ist der
       Rueckweg, falls die Hoehenanpassung im JS einmal nicht greift. */
    resize: vertical;
    /* ⚠ `auto`, NICHT `hidden`: faellt die Hoehenanpassung aus (zugeklappter
       Container, alter Browser), bleibt der Inhalt ueber die Bildlaufleiste
       erreichbar. `hidden` wuerde ihn abschneiden – die teurere
       Halbfehlerstellung. */
    overflow-y: auto;
}
.fb-tab textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ⚠ EINE ANTWORT DARF MEHRZEILIG SEIN – beim LESEN genauso wie beim Schreiben.
   HTML macht aus einem Umbruch ein Leerzeichen; ohne `pre-wrap` saehe der
   Benutzer unter „Meine Abgaben" einen Textklumpen, wo er Absaetze geschrieben
   hat (Register: /chat, 2026-08-31). `anywhere`, damit eine lange Antwort die
   Tabelle nicht breiter macht als das Fenster. */
.fb-tab td.fb-c-text {
    white-space: pre-wrap; overflow-wrap: anywhere;
    max-width: 34em; min-width: 8em;
}

/* Mit mehrzeiligen Feldern steht die Zeilennummer sonst mittig neben einem
   hohen Feld. `top` richtet alles an der ERSTEN Zeile aus – dort steht die
   Aussage. */
.fb-tab td { vertical-align: top; }
.fb-tab td.fb-c-nr { padding-top: 14px; }

/* Zeile entfernen – Muelleimer (Symbol-Semantik: hier wird etwas entfernt). */
.fb-row-del {
    background: none; border: 0; cursor: pointer; padding: 4px;
    color: var(--text-muted); line-height: 1; border-radius: var(--radius-sm);
}
.fb-row-del:hover { color: var(--danger); }
.fb-row-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Sterne ────────────────────────────────────────────────────────────── */
.fb-sterne { display: inline-flex; align-items: center; gap: 2px; }

.fb-stern {
    background: none; border: 0; cursor: pointer; padding: 2px;
    color: var(--text-muted); line-height: 1; border-radius: var(--radius-sm);
}
/* Ein gesetzter Stern ist GEFUELLT (Form) UND farbig (zweite Ebene) – die
   Form allein traegt die Aussage, die Farbe hilft nur beim schnellen Lesen. */
.fb-stern.is-an { color: var(--accent); }
.fb-stern:hover { color: var(--accent); }
.fb-stern:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-stern .jv-ico { width: 18px; height: 18px; }

/* Der Zahlenwert neben den Sternen: ohne ihn ist "3 von 5" nur zu sehen,
   indem man zaehlt – und fuer einen Screenreader gar nicht. */
.fb-sterne-wert {
    font-size: .78rem; color: var(--text-secondary); margin-left: 6px;
    min-width: 2.2em;
}

/* ── Status und Meldungen ──────────────────────────────────────────────── */
.fb-status { font-size: .85rem; margin-top: 8px; min-height: 1.2em; }
.fb-status.is-ok { color: var(--success); }
.fb-status.is-err { color: var(--danger); }

.fb-leer { color: var(--text-secondary); font-size: .9rem; margin: 8px 0; }

/* ── Eigene Abgaben ────────────────────────────────────────────────────── */
.fb-abgabe {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 10px; overflow: hidden;
}
.fb-abgabe-kopf {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; background: var(--bg-glass);
    font-size: .85rem;
}
.fb-abgabe-titel { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.fb-abgabe-zeit { color: var(--text-secondary); font-size: .8rem; flex: 0 0 auto; }
.fb-abgabe-body { padding: 4px 12px 10px; overflow-x: auto; }

@media (max-width: 720px) {
    .fb-tab th, .fb-tab td { padding: 6px 7px; }
    .fb-tab textarea { min-width: 110px; }
    .fb-tab td.fb-c-nr { padding-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  Einstellungs-Reiter „Feedback"
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ⚠ DIESE DATEI WIRD VON ZWEI SEITEN GELADEN: `/feedback` (Bereichsseite) und
 * `/settings` (Reiter). Das ist Absicht – Tabelle, Sterne und Abgabe-Karte
 * werden an BEIDEN Orten gebraucht, und zwei Fassungen waeren beim naechsten
 * Feinschliff auseinandergelaufen (Register: dieselbe Lehre wie bei den vier
 * `_client()`-Stellen des Jira-Zugangs).
 *
 * Die Klassen darunter (`.fb-card`, `.fb-edit`, `.fb-sp`) kommen nur im Reiter
 * vor; sie stehen trotzdem hier, damit „wo finde ich das CSS von .fb-*" genau
 * eine Antwort hat.
 */

/* ── Formular-Karte in der Liste ───────────────────────────────────────── */
.fb-card {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: 8px;
    /* `overflow: hidden` ist der Grund, warum Zeile und aufgeklappter Editor
       wie EIN Kasten aussehen (Register: „wenn zwei Dinge wie eines aussehen
       sollen, gehoert eines INS andere"). */
    overflow: hidden;
}
.fb-card-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
/* Abgeschaltete Formulare per Deckkraft abgeschwaecht – eine harte Farbe waere
   in Hell und Dunkel nie gleichzeitig richtig (Register: Rollen-Liste). */
.fb-card.is-aus .fb-card-row { opacity: .55; }

/* ⚠ `min-width: 0` IST PFLICHT: ohne das schiebt ein langer Titel Schalter und
   Knoepfe aus der Zeile – ein Flex-Kind schrumpft von sich aus nicht unter
   seine Inhaltsbreite (Register). */
.fb-card-main { flex: 1 1 auto; min-width: 0; }
.fb-card-name {
    display: block; font-weight: 600; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* ⚠ `overflow: hidden` OHNE `line-height` frisst Unterlaengen – aus
       „share_1" wurde sichtbar „share 1" (Register, 2026-09-13). */
    line-height: 1.6;
}
.fb-card-meta { display: block; font-size: .76rem; color: var(--text-muted); }

.fb-aktiv {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    font-size: .78rem; color: var(--text-secondary); cursor: pointer;
}

.fb-act {
    background: none; border: 0; cursor: pointer; padding: 4px;
    color: var(--text-muted); line-height: 1; flex: 0 0 auto;
    border-radius: var(--radius-sm); font-size: 1rem;
}
.fb-act:hover { color: var(--text-primary); }
.fb-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Ziehgriff ─────────────────────────────────────────────────────────── */
/* `flex: 0 0 auto`: der Griff darf unter Druck nicht nachgeben – das tut
   `.fb-card-main` (flex: 1 1 auto). */
.fb-griff {
    flex: 0 0 auto; width: 20px; text-align: center; cursor: grab;
    color: var(--text-muted); user-select: none; line-height: 1;
    border-radius: var(--radius-sm);
}
.fb-griff:hover { color: var(--text-primary); }
.fb-griff:active { cursor: grabbing; }
.fb-griff:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-card.is-zieht, .fb-sp.is-zieht, .fb-z.is-zieht { opacity: .45; }
.fb-card.is-ziel, .fb-sp.is-ziel, .fb-z.is-ziel {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* ── Editor ────────────────────────────────────────────────────────────── */
.fb-edit {
    padding: 12px; border-top: 1px solid var(--border);
    background: var(--bg-glass);
}
.fb-feld { margin-bottom: 12px; }
.fb-feld > label {
    display: block; font-size: .8rem; color: var(--text-secondary);
    margin-bottom: 4px;
}
/* ⚠ `width: 100%` + `box-sizing`: `.form-group` bringt im Projekt KEINE Breite
   mit, und ein Feld, das nur so breit ist wie sein Inhalt, sieht kaputt aus
   (Register, 2026-09-10). */
.fb-feld input[type="text"], .fb-feld textarea {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: .9rem; font-family: inherit;
}
.fb-feld input[type="text"]:focus-visible, .fb-feld textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}

.fb-sp {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    padding: 6px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-secondary);
}
.fb-sp .fb-sp-name { flex: 1 1 auto; min-width: 0; }
.fb-sp .fb-sp-typ {
    flex: 0 0 auto; padding: 6px 8px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    /* Deckende Flaeche: sonst weisse Schrift auf Weiss in der Optionsliste. */
    background: var(--bg-glass); color: var(--text-primary);
    font-size: .85rem; font-family: inherit;
}
.fb-sp .fb-sp-typ:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Die Felder IN der Spaltenzeile duerfen die 100%-Regel von `.fb-feld` nicht
   erben – sonst sprengt der Name die Zeile. */
.fb-feld .fb-sp input[type="text"] { width: auto; }

/* ── Feste Zeilen im Editor ────────────────────────────────────────────────
   Bauform der Spaltenzeile: EIN Container je Zeile, Griff links, Muelleimer
   rechts, dazwischen je ein Feld pro `fest`-Spalte. */
.fb-z {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    padding: 6px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-secondary);
}
/* `min-width: 0` ist Pflicht: ein Flex-Kind schrumpft von sich aus nicht unter
   seine Inhaltsbreite – ohne die Zeile schiebt ein langer Kriteriumstext den
   Muelleimer aus dem Container (Register). */
.fb-z .fb-z-wert { flex: 1 1 auto; min-width: 0; }
.fb-z .fb-z-nr {
    flex: 0 0 auto; min-width: 1.4em; text-align: right;
    font-size: .8rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.fb-z .fb-z-leer {
    flex: 1 1 auto; font-size: .85rem; color: var(--text-secondary);
    font-style: italic;
}
/* Wie bei `.fb-sp`: die 100%-Regel von `.fb-feld` wuerde die Zeile sprengen. */
.fb-feld .fb-z input[type="text"] { width: auto; }
.fb-hint {
    margin: 0 0 6px; font-size: .8rem; color: var(--text-secondary);
    line-height: 1.5;
}

.fb-edit-akt { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fb-edit-status { font-size: .85rem; }

/* ── Auswertung ────────────────────────────────────────────────────────── */
.fb-abg-kopf {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.fb-abg-kopf select {
    flex: 1 1 200px; min-width: 0; max-width: 380px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: .9rem; font-family: inherit;
}
.fb-abg-kopf select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Der Reiter laedt `jira_addon.css` NICHT – dort steht `.ja-btn`. Im Reiter
   gibt es `.btn-primary`/`.btn-secondary` aus style.css; die Editor-Knoepfe
   tragen aber `.ja-btn`, damit derselbe Baustein auf beiden Seiten gleich
   aussieht. Also die noetigen Regeln hier, nur fuer diese Datei. */
.fb-edit .ja-btn, .fb-abg-kopf .ja-btn {
    padding: 7px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-secondary);
    color: var(--text-primary); font-size: .88rem; font-family: inherit;
    cursor: pointer; flex: 0 0 auto;
}
.fb-edit .ja-btn:hover:not(:disabled), .fb-abg-kopf .ja-btn:hover:not(:disabled) {
    border-color: var(--accent);
}
.fb-edit .ja-btn:disabled, .fb-abg-kopf .ja-btn:disabled { opacity: .55; cursor: default; }
.fb-edit .ja-btn-haupt, .fb-abg-kopf .ja-btn-haupt {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.fb-edit .ja-btn:focus-visible, .fb-abg-kopf .ja-btn:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}