/* pruefung.css – Zusatzstile des Prüfungssystems (ergänzt app.css, Design unverändert).
   Nur neue Komponenten: Datentabellen, Toolbar/Filter, Statusbadges, Prüfungsbaum, Formularraster. */

/* ── Toolbar / Filterzeile ─────────────────────────────────────────────────────── */
.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:0 0 1.2rem; }
.toolbar .grow { flex:1 1 220px; min-width:0; }
.toolbar .field { margin-bottom:0; }
.toolbar form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; width:100%; }

/* ── Datentabellen ─────────────────────────────────────────────────────────────── */
.ptable { width:100%; border-collapse:collapse; font-size:.94rem; }
.ptable th, .ptable td { padding:.6rem .7rem; text-align:left; vertical-align:middle; }
.ptable thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:2px solid var(--border); white-space:nowrap; }
.ptable tbody tr { border-top:1px solid var(--border); }
.ptable tbody tr:hover { background:var(--panel-2); }
.ptable td.actions { text-align:right; white-space:nowrap; }
.ptable code { font-size:.84rem; color:var(--muted); }

/* ── Buttons: kleinere/zweitrangige Varianten ──────────────────────────────────── */
.btn.small { padding:.4rem .7rem; font-size:.84rem; border-radius:9px; }
.btn.ghost { background:transparent; }

/* ── Statusbadges ──────────────────────────────────────────────────────────────── */
.status { display:inline-flex; align-items:center; gap:.38rem; font-size:.76rem; font-weight:800; letter-spacing:.02em;
  padding:.22rem .6rem; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.status::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.status.s-nicht_begonnen, .status.s-geplant { color:var(--muted); background:var(--panel-2); border-color:var(--border); }
.status.s-laeuft { color:#1a7f37; background:color-mix(in srgb,#1a7f37 12%,transparent); border-color:color-mix(in srgb,#1a7f37 35%,transparent); }
.status.s-pausiert { color:#8a5a00; background:color-mix(in srgb,#b3261e 0%, #f0a000 14%); border-color:color-mix(in srgb,#f0a000 45%,transparent); }
.status.s-beendet, .status.s-abgeschlossen { color:var(--accent-strong); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.status.s-auswertung { color:#1f5fbf; background:color-mix(in srgb,#1f5fbf 12%,transparent); border-color:color-mix(in srgb,#1f5fbf 35%,transparent); }

/* ── Chips (z. B. zugeordnete Schüler/Kommission in Listen) ─────────────────────── */
.chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; background:var(--panel-2);
  border:1px solid var(--border); border-radius:999px; padding:.18rem .6rem; margin:.1rem .15rem 0 0; }
.chip.muted { color:var(--muted); }

/* ── Formularraster ────────────────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 1.1rem; }
.form-grid .span2 { grid-column:1 / -1; }
.field textarea { width:100%; border:1.5px solid var(--border-strong); border-radius:11px; padding:.7rem .85rem; font-size:.98rem;
  background:var(--panel-2); color:var(--text); font-family:inherit; resize:vertical; min-height:4.5rem; }
.field textarea:focus { outline:none; border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 4px var(--ring); }
.field .check { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--text); font-size:.95rem; }
.field .check input { width:auto; }

/* ── Prüfungsbaum (aufklappbar, native <details>) ──────────────────────────────── */
.baum { display:flex; flex-direction:column; gap:.6rem; }
.baum details { border:1px solid var(--border); border-radius:14px; background:var(--panel); overflow:hidden; }
.baum details[open] { box-shadow:var(--shadow); }
.baum summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; font-weight:800; }
.baum summary::-webkit-details-marker { display:none; }
.baum summary .caret { margin-left:auto; transition:transform .18s; color:var(--muted); }
.baum details[open] > summary .caret { transform:rotate(90deg); }
.baum .knoten-num { flex:none; width:1.7rem; height:1.7rem; border-radius:8px; background:var(--accent-soft); color:var(--accent-strong);
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; }
.baum .inhalt { padding:.3rem 1rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.baum .blatt { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.6rem .8rem; border:1px solid var(--border);
  border-radius:11px; background:var(--panel-2); }
.baum .blatt .bl-title { font-weight:700; }
.baum .blatt .bl-meta { color:var(--muted); font-size:.84rem; }
.baum .blatt .bl-right { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.baum .subgroup { border-left:2px solid var(--border); margin-left:.4rem; padding-left:.7rem; display:flex; flex-direction:column; gap:.45rem; }
.baum .subhead { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:.2rem 0 .1rem; }

/* ── Detail-Kopf (Grunddaten) ──────────────────────────────────────────────────── */
.deflist { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem 1.4rem; margin:0; }
.deflist .dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; }
.deflist .dd { font-size:1rem; font-weight:600; margin:.1rem 0 0; }

.page-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.3rem; }
.section-title { font-size:1.05rem; font-weight:800; margin:1.6rem 0 .7rem; }

/* ── Fallbeispielmodul ─────────────────────────────────────────────────────────── */
/* Statusleiste (Zeit / Status / Verbindung) */
.fb-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; }
.fb-timer { font-variant-numeric:tabular-nums; font-size:1.8rem; font-weight:800; letter-spacing:.02em; }
.fb-conn { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.25rem .65rem; border-radius:999px; border:1px solid var(--border); }
.fb-conn::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:currentColor; }
.fb-conn.on { color:#1a7f37; background:color-mix(in srgb,#1a7f37 10%,transparent); }
.fb-conn.off { color:#b3261e; background:var(--accent-soft); }

/* Funktionskarten */
.fb-funcs { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.9rem; margin:0 0 1.3rem; }
.fb-func { border:2px solid var(--border); border-radius:16px; background:var(--panel); padding:1rem 1.1rem; text-align:left; cursor:pointer;
  transition:border-color .13s, box-shadow .13s, transform .1s; font:inherit; color:inherit; }
.fb-func:hover { border-color:var(--accent); }
.fb-func:active { transform:translateY(1px); }
.fb-func.mine { border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--ring); }
.fb-func.belegt { opacity:.92; }
.fb-func h3 { margin:0 0 .3rem; font-size:1.1rem; }
.fb-func .who { font-size:.9rem; color:var(--muted); }
.fb-func .who.frei { color:#1a7f37; font-weight:700; }

/* Große Zuordnungs-/Aktionsbuttons (Tablet) */
.zubtns { display:flex; flex-wrap:wrap; gap:.4rem; }
.zubtn { border:1.5px solid var(--border-strong); background:var(--panel); border-radius:10px; padding:.5rem .7rem; font-weight:700;
  font-size:.86rem; cursor:pointer; color:var(--text); min-width:3rem; }
.zubtn:hover { border-color:var(--accent); color:var(--accent); }
.zubtn.p1 { }
.zubtn.p2 { }
.zubtn.on { background:var(--accent); color:#fff; border-color:var(--accent-strong); }

/* Untersuchungs-Matrix */
.fb-matrix .bereich { margin:0 0 .8rem; }
.fb-matrix .punkt { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.6rem .2rem; border-top:1px solid var(--border); }
.fb-matrix .punkt .pname { font-weight:700; flex:1 1 180px; min-width:140px; }
.fb-matrix .punkt .cells { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.cell-tag { font-size:.78rem; font-weight:700; padding:.18rem .5rem; border-radius:7px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); }
.cell-tag.done { background:color-mix(in srgb,#1a7f37 14%,transparent); color:#1a7f37; border-color:color-mix(in srgb,#1a7f37 35%,transparent); }
.cell-tag.nd { background:var(--accent-soft); color:var(--accent-strong); }
.cell-tag.nb { background:color-mix(in srgb,#f0a000 16%,transparent); color:#8a5a00; }

/* Chronologischer Verlauf */
.fb-feed { display:flex; flex-direction:column; gap:.35rem; max-height:60vh; overflow:auto; }
.fb-feed .row { display:flex; gap:.6rem; align-items:baseline; padding:.4rem .5rem; border-radius:8px; }
.fb-feed .row:nth-child(odd) { background:var(--panel-2); }
.fb-feed .t { font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem; flex:none; }
.fb-feed .txt { flex:1; }
.fb-feed .row.vorlaeufig { outline:1px dashed color-mix(in srgb,var(--accent) 50%,transparent); }
.fb-feed .undo { font-size:.78rem; font-weight:700; color:var(--accent-strong); background:none; border:0; cursor:pointer; }

/* Dialog (Maßnahmen / Bemerkung) */
.fb-dlg-ov { position:fixed; inset:0; z-index:210; display:flex; align-items:flex-start; justify-content:center; background:rgba(8,12,22,.55); padding:1.2rem; overflow:auto; }
.fb-dlg { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  max-width:620px; width:100%; padding:1.3rem 1.4rem; margin-top:4vh; }
.fb-dlg h3 { margin:.1rem 0 1rem; }
.fb-cat { margin-bottom:.8rem; }
.fb-cat .kh { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:.4rem 0 .3rem; }
.fb-cat .mlist { display:flex; flex-wrap:wrap; gap:.4rem; }

@media (max-width:640px){ .fb-timer{ font-size:1.5rem; } }