/* ── SONIC BRIEFS AN DER FIRMA (js/sonic-briefs.js, nur Admins) ─────────────
   Tokens aus css/style.css: Neutrale nur ueber rgba(var(--n),a), Status-
   farben ueber --*-rgb, damit Hell und Dunkel ohne eigene Regeln gehen. */

.sb-bereich { margin-top: 24px; }
/* hidden gilt im Bereich immer: .btn-secondary (display: inline-flex) ueberschreibt sonst die UA-Regel,
   der Knopf "Erneut versuchen" war dauernd sichtbar (Re-Review 2) */
#sonic-briefs-bereich [hidden],
.sb-bereich [hidden] { display: none !important; }
.sb-kopf { flex-wrap: wrap; }
.sb-neu-knopf { margin-left: auto; }

.sb-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-zeile {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text-primary);
  background: rgba(var(--n),.03); border: 1px solid rgba(var(--n),.10); border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.sb-zeile:hover { background: rgba(var(--n),.06); }
.sb-zeile:focus-visible { outline: 2px solid var(--border-active); outline-offset: 2px; }
.sb-zeile--offen { border-color: var(--border-active); background: rgba(var(--n),.06); }
.sb-zeile-titel { font-weight: 600; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.sb-zeile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-muted); }
.sb-pdf-symbol { display: inline-flex; color: var(--success); }

.sb-status, .sb-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: rgba(var(--n),.08); color: var(--text-secondary);
}
.sb-status--entwurf       { background: rgba(var(--n),.08); color: var(--text-secondary); }
.sb-status--vorbereitung  { background: rgba(var(--info-rgb),.14); color: var(--info); }
.sb-status--workshop      { background: rgba(var(--warning-rgb),.14); color: var(--warning); }
.sb-status--abgeschlossen { background: rgba(var(--success-rgb),.14); color: var(--success); }
.sb-chip-pdf-fehlt        { background: rgba(var(--danger-rgb),.14); color: var(--danger); }
.sb-chip-kunde            { background: rgba(var(--info-rgb),.14); color: var(--info); }
.sb-chip-team             { background: rgba(var(--n),.08); color: var(--text-secondary); }
.sb-chip-aktiv            { background: rgba(var(--success-rgb),.14); color: var(--success); }
.sb-chip-ueberschrieben   { background: rgba(var(--warning-rgb),.14); color: var(--warning); font-weight: 500; }
.sb-chip-ausgeblendet     { background: rgba(var(--warning-rgb),.14); color: var(--warning); }

.sb-detail {
  margin-top: 14px; padding: 18px; border: 1px solid rgba(var(--n),.12); border-radius: 14px;
  background: var(--bg-card); display: flex; flex-direction: column; gap: 18px;
}
.sb-detail-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-detail-kopf h3 { font-size: 18px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }

.sb-abschnitt { border-top: 1px solid rgba(var(--n),.10); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sb-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sb-abschnitt-kopf h4 { font-size: 15px; font-weight: 600; color: rgba(var(--n),.86); }

.sb-ueberblick-status { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.sb-dl:empty { display: none; }
.sb-dl-zeile dt { font-size: 12px; color: var(--text-muted); }
.sb-dl-zeile dd { font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }

.sb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-knopf { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.sb-knopf:hover { text-decoration: none; }
.sb-knopf--warnung { background: var(--danger); border-color: var(--danger); color: #fff; }

.sb-schalter, .sb-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-primary); }
.sb-schalter input, .sb-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

.sb-hinweis { font-size: 13px; color: var(--text-muted); }
/* Fix-Runde 1 Task 3: Speicherfehler der Termine bleiben an Feld und Karte stehen */
.sb-feldfehler { display: block; margin-top: 4px; font-size: 13px; color: var(--danger, #b91c1c); }
.sb-feldfehler[hidden] { display: none; }
#sb-termine-form input[aria-invalid="true"] { border-color: var(--danger, #b91c1c); }
.sb-termine-fehler { color: var(--danger, #b91c1c); }
.sb-dl-zeile[hidden] { display: none; }
/* Spec 2026-09-18: Notiz unter dem Meilenstein Interviews in der Termintabelle */
.sb-meilenstein-notiz { font-size: 13px; font-weight: normal; color: var(--text-muted); }
.sb-klein { font-size: 12px; color: var(--text-muted); }
.sb-notiz { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.sb-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.sb-neuer-link {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border-active); background: rgba(var(--n),.03);
}
.sb-neuer-link label { font-size: 13px; font-weight: 600; }
.sb-kopieren { display: flex; gap: 8px; }
.sb-kopieren input {
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary);
}

.sb-modul + .sb-modul { margin-top: 12px; }
.sb-modul-titel { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.sb-antworten { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-antwort { padding: 8px 10px; border-radius: 8px; background: rgba(var(--n),.03); }
.sb-antwort--leer { opacity: .55; }
.sb-antwort--ausgeblendet { opacity: .7; }
.sb-frage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 13px; color: var(--text-secondary); }
.sb-frage-text { flex: 1 1 200px; }
.sb-nr { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.sb-wert { font-size: 14px; color: var(--text-primary); margin-top: 4px; overflow-wrap: anywhere; white-space: pre-line; }
/* 3.1 Bewertung (16.09.2026): Zahl, Wort und einfacher Balken 0..10 je Karte */
.sb-bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.sb-balken { flex: 0 0 120px; height: 6px; border-radius: 3px; background: rgba(var(--n),.1); overflow: hidden; }
.sb-balken-fuellung { display: block; height: 100%; background: var(--accent); }

.sb-bereich textarea {
  width: 100%; resize: vertical; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary);
}
.sb-checkliste { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-autosave { font-size: 12px; color: var(--text-muted); }
.sb-autosave--fehler { color: var(--danger); }
.sb-autosave-zeile { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-autosave-erneut { padding: 3px 10px; font-size: 12px; }
.sb-check-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sb-check-text input {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px;
}
.sb-leere-umschalten { align-self: flex-start; margin-top: 10px; }
.sb-antworten-liste[data-leere="aus"] .sb-antwort--leer,
.sb-antworten-liste[data-leere="aus"] .sb-modul--leer { display: none; }
.sb-nowrap { white-space: nowrap; }
.sb-wiederherstellen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(var(--warning-rgb),.45); background: rgba(var(--warning-rgb),.10); font-size: 13px; color: var(--text-primary);
}
.sb-wiederherstellen p { flex: 1 1 260px; }

.sb-tabelle-rahmen { overflow-x: auto; }
.sb-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb-tabelle th, .sb-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(var(--n),.08); vertical-align: top; }
.sb-tabelle thead th { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sb-tabelle tbody th { font-weight: 600; color: var(--text-primary); }
.sb-tabelle input[type="date"], .sb-tabelle select, .sb-upload select, .sb-upload input[type="date"], .sb-start input {
  padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 13px;
}
/* Dateiname: Umbruch nur an Trennzeichen (<wbr> nach - _ .), hoechstens zwei Zeilen, voller Name im title */
.sb-dateiname { min-width: 16ch; max-width: 34ch; }
.sb-dateiname-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: normal; word-break: normal;
}
.sb-aktionen { white-space: nowrap; }
.sb-aktionen button + button { margin-left: 6px; }

.sb-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px; border-radius: 10px; background: rgba(var(--n),.03); }
.sb-upload[aria-busy="true"] { opacity: .7; }
.sb-upload-felder { display: contents; }
.sb-upload .form-group { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.sb-upload label { font-size: 12px; color: var(--text-muted); }
.sb-upload input[type="file"] { font-size: 13px; color: var(--text-secondary); max-width: 100%; }

/* Schmal: Tabellen mit data-titel stapeln sich zu Karten */
@media (max-width: 640px) {
  .sb-detail { padding: 12px; }
  .sb-neu-knopf { margin-left: 0; }
  .sb-tabelle--stapel thead { display: none; }
  .sb-tabelle--stapel, .sb-tabelle--stapel tbody, .sb-tabelle--stapel tr, .sb-tabelle--stapel td, .sb-tabelle--stapel th { display: block; width: 100%; }
  .sb-tabelle--stapel tr { padding: 8px 0; border-bottom: 1px solid rgba(var(--n),.10); }
  .sb-tabelle--stapel td, .sb-tabelle--stapel th { border: 0; padding: 3px 0; }
  .sb-tabelle--stapel td[data-titel]::before { content: attr(data-titel); display: block; font-size: 11px; color: var(--text-muted); }
  .sb-aktionen { white-space: normal; }
  .sb-dateiname { min-width: 0; max-width: none; }
  .sb-kopieren { flex-direction: column; }
  .sb-upload { flex-direction: column; align-items: stretch; }
}

/* Serverpruefung (Phase E, Task 1) */
.sb-server-knopf { margin-left: 0.5rem; }
.sb-server-rahmen { overflow-x: auto; }
.sb-server-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sb-server-tabelle th, .sb-server-tabelle td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.sb-server-stand { font-weight: 600; }
.sb-server-stand--ok { color: var(--success, #15803d); }
.sb-server-stand--fehlt { color: var(--danger, #b91c1c); }
.sb-server-stand--info { color: var(--text-muted, #6b7280); }
.sb-server-ergebnis { font-weight: 600; }

/* Hoertest-Auswertung (Spec 2026-09-16, Stufe 2) */
.sb-hoer-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.sb-hoer-clip { padding: 6px 0; border-bottom: 1px solid rgba(var(--n),.08); }
.sb-hoer-name { font-weight: 600; }
.sb-hoer-wort { font-size: 13px; color: var(--text-secondary); }
.sb-hoer-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sb-hoer-vergleich--bestaetigt { color: var(--success, #15803d); }
.sb-hoer-vergleich--widerspruch { color: var(--danger, #b91c1c); font-weight: 600; }
.sb-hoer-vergleich--offen, .sb-hoer-vergleich--zu_wenig { color: var(--text-muted, #6b7280); }

/* Kreativbriefing (Spec 2026-09-16, Stufe 3) */
.sb-kb { align-items: center; flex-wrap: wrap; gap: 8px; }
.sb-kb-sprache { font-size: 12px; color: var(--text-muted); }