/* Klausurtracker — interne Werkzeug-Ansicht.
   Baut auf style.css (Tokens) + konto.css (Hairline-Abschnitte, KPIs, Badges,
   Fehlertabelle) auf. Sober: keine Marketing-Akzente, Sienna nur für Links/
   Aktionen, Rot ausschließlich für Schweregrad/Status, Tanne markiert
   Erledigtes/Verstandenes. Es werden NUR bestehende Tokens genutzt. */

/* --- Werkzeugleiste über der Tabelle --- */
.tracker-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  margin: 0 0 1rem;
}
.tracker-toolbar .feld { margin: 0; }
.tracker-toolbar .feld label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--schrift-mono); color: var(--tinte-blass); }
.tracker-toolbar select { padding: .4rem .6rem; }
.tracker-toolbar .spacer { flex: 1 1 auto; }

/* --- Notion-artige Tracker-Tabelle --- */
/* Horizontaler Scroll auf schmalen Viewports: die 7-spaltige Tabelle ist breiter
   als ein Handy-Display; ohne Container überliefe sonst die ganze Seite. */
.t-tab-wrap { overflow-x: auto; }
.tracker-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tracker-tab th, .tracker-tab td {
  padding: .5rem .55rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.tracker-tab thead th {
  font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinte-blass);
  white-space: nowrap;
}
.tracker-tab th.sortbar { cursor: pointer; user-select: none; }
.tracker-tab th.sortbar:hover { color: var(--terra-tief); }
.tracker-tab th .pfeil { color: var(--terra-tief); }
.tracker-tab tbody tr.zeile:hover { background: color-mix(in srgb, var(--terra) 6%, transparent); }
.tracker-tab td.num { text-align: right; font-family: var(--schrift-mono); }
.tracker-tab .titel-zelle { font-weight: 600; }
.tracker-tab .klausur-art {
  font-family: var(--schrift-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinte-blass); display: block; margin-top: .1rem;
}
.tracker-tab .zeile { cursor: pointer; }

/* Erledigte Zeilen kippen auf die Lern-Fläche (Fortschritt = Tanne, kein Badge).
   CSS-only über den gewählten Status im Zeilen-Select; ohne :has-Unterstützung
   bleibt die Zeile schlicht ungetönt. */
.tracker-tab tbody tr.zeile:has(.t-status-select option[value="erledigt"]:checked) {
  background: var(--tanne-blass);
}
.problem-liste li:has(.t-status-select option[value="verstanden"]:checked) {
  background: var(--tanne-blass);
  padding-left: .6rem;
  padding-right: .6rem;
}

/* Status-Wechsel in der Zeile: ruhiges Feld statt Browser-Default */
.t-status-select {
  font: inherit;
  font-family: var(--schrift-sans);
  font-size: .82rem;
  padding: .25rem .45rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  background: var(--feld-bg);
  color: var(--tinte);
  cursor: pointer;
}
.t-status-select:focus { outline: none; border-color: var(--terra); background: var(--fokus-bg); }

/* Schweregrad-Zähler: Datenziffern in .72rem → -tief-Stufen (AA-Kleintext);
   auch die Null ist eine Information und bleibt lesbar. */
.sev-zaehler { display: inline-flex; gap: .3rem; font-family: var(--schrift-mono); font-size: .72rem; }
.sev-zaehler span { display: inline-flex; align-items: center; gap: .15rem; }
.sev-zaehler .s-schwer { color: var(--rot-tief); }
.sev-zaehler .s-mittel { color: var(--bernstein-tief); }
.sev-zaehler .s-leicht { color: var(--gruen-tief); }
.sev-zaehler .s-null { color: var(--tinte-leise); }

/* Tracking-Status als Outline-Badge (wie konto.css .badge) */
.tstatus {
  display: inline-block; font-family: var(--schrift-mono); font-size: .62rem;
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid currentColor;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 500; white-space: nowrap;
}
.tstatus.offen { color: var(--tinte-blass); }
.tstatus.laeuft { color: var(--bernstein); }
.tstatus.nachbereitet { color: var(--bernstein); }
.tstatus.erledigt { color: var(--gruen); }
.tstatus.in_arbeit { color: var(--bernstein); }
.tstatus.verstanden { color: var(--gruen); }

/* Tag-Chips */
.t-tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.t-tag {
  font-size: .68rem; padding: .05rem .45rem; border-radius: 999px;
  background: var(--papier-tief); color: var(--tinte-blass); border: 1px solid var(--linie);
}

/* Aufgeklappte Detail-/Bearbeiten-Zeile */
.tracker-tab tr.detail-zeile > td { background: var(--papier-hell); padding: 1rem; }
.t-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1rem; }
.t-detail-grid .feld { margin: 0; }
.t-detail-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; align-items: center; }
.t-detail-voll { grid-column: 1 / -1; }

/* --- LLM-Analyse-Panel --- */
.analyse-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.analyse-meta { font-family: var(--schrift-mono); font-size: .72rem; color: var(--tinte-blass); }
/* Hinweis = Randbemerkung: 3px-Lineal in Bernstein, -tief-Text, kein Kasten */
.analyse-hinweis {
  font-size: .9rem;
  padding: .15rem 0 .15rem .9rem;
  border: 0;
  border-left: 3px solid var(--bernstein);
  border-radius: 0;
  background: transparent;
  color: var(--bernstein-tief);
}
.muster-liste { display: grid; gap: .85rem; margin: 1rem 0 0; }
/* Fehlermuster als Randbemerkung: 3px-Linksmarker (Schweregrad) + Hairline */
.muster-karte {
  border: 0;
  border-left: 3px solid var(--linie);
  border-bottom: 1px solid var(--linie-zart);
  border-radius: 0;
  background: transparent;
  padding: .1rem 0 .85rem .9rem;
}
.muster-liste .muster-karte:last-child { border-bottom: 0; padding-bottom: .1rem; }
.muster-karte.schwer { border-left-color: var(--rot); }
.muster-karte.mittel { border-left-color: var(--bernstein); }
.muster-karte.leicht { border-left-color: var(--gruen); }
.muster-karte h4 { margin: 0 0 .25rem; font-size: 1rem; }
.muster-karte .m-meta { font-family: var(--schrift-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-blass); margin-bottom: .35rem; }
.muster-karte p { margin: .25rem 0 0; }
.empf-liste { margin: .75rem 0 0; padding-left: 1.1rem; }
.empf-liste li { margin-bottom: .5rem; }
.empf-liste li strong { display: block; }

/* --- Problemfelder --- */
.problem-liste { list-style: none; margin: 0; padding: 0; }
.problem-liste li {
  display: flex; flex-wrap: wrap; gap: .5rem .85rem; align-items: center;
  padding: .6rem 0; border-bottom: 1px solid var(--linie);
}
.problem-liste li .p-titel { font-weight: 600; flex: 1 1 220px; }
.problem-liste li .p-rg { font-family: var(--schrift-mono); font-size: .68rem; color: var(--tinte-blass); }

/* --- Klausur eintragen: ein ruhiges Notizblatt, kein gedrängtes Formular ---
   Ein Feld pro Beschriftung, Titel/Tags/Notiz über die volle Breite; nur der
   Titel ist Pflicht. */
.t-neu-form {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 1.25rem 0;
  margin: 0 0 1.25rem;
}
.t-neu-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .9rem 1.25rem;
}
.t-neu-raster .feld { margin: 0; min-width: 0; }
.t-neu-voll { grid-column: 1 / -1; }
.t-neu-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* Leerzustände & kleine Helfer */
.t-leer { color: var(--tinte-blass); }
.zeile-aus { display: none; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.inline-form .feld { margin: 0; }
.btn-mini { font-size: .8rem; padding: .35rem .7rem; }
/* Löschen ist eine Handlung → Terra wie alle Klick-Elemente; die
   Destruktivität tragen Wortlaut + Rückfrage, nicht Rot (Rot = Urteil). */
.loeschen-link { color: var(--tinte-blass); background: none; border: none; cursor: pointer; font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.loeschen-link:hover { color: var(--terra-tief); }

/* Ehemalige Inline-Styles der JS-Templates (tracker.js) — hier gebündelt. */
.karte > h2:first-child { margin-top: 0; }
.t-feld-fest { padding-top: .35rem; }
.t-detail-hinweis { color: var(--tinte-blass); font-size: .85rem; }
.t-detail-aktionen .spacer { flex: 1 1 auto; }
.t-abschnitt-titel { margin: 1.5rem 0 .5rem; }
.t-abschnitt-titel.eng { margin: 1.25rem 0 .35rem; }
.t-nachsatz { margin-top: 1rem; }
.trend-titel { margin: .25rem 0 .5rem; }
.trend-titel .trend-delta { font-size: .8rem; font-weight: 600; }
.analyse-kopf h2 { margin: 0; }
#problem-form { margin-top: 1rem; }
#pf-titel { min-width: min(18rem, 100%); }

/* Tastatur-Fokus auf Sortier-Köpfen und Klausur-Zeilen (tabindex="0"):
   Fokusring nach innen, damit er im Tabellenraster nicht beschnitten wird. */
.tracker-tab th.sortbar:focus-visible,
.tracker-tab tr.zeile:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }