/* Slide Protokoll und seine Detailseite. Oben links ausgerichtet, damit
   nichts springt, wenn sich Suche, Filter oder Seite aendern. */

.protokollbody { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; justify-content: flex-start; }

.protokollbody .steuerung { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.protokollbody .steuerung :is(input, select, button) { font: inherit; font-size: clamp(.75rem, .9vw, .95rem); padding: .35em .6em; border: 1px solid var(--color-text-primary); background: var(--color-surface); color: var(--color-text-primary); }
.protokollbody .steuerung input[type="search"] { min-width: 28ch; flex: 1 1 28ch; max-width: 46ch; }
.protokollbody .steuerung button { cursor: pointer; }
.protokollbody .steuerung button:disabled { color: var(--color-text-muted); border-color: var(--color-border); cursor: default; }
.protokollbody .blaettern { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: clamp(.75rem, .9vw, .95rem); white-space: nowrap; }

.protokolltabelle { flex: 1; min-height: 0; overflow-y: auto; border-top: 2px solid var(--color-text-primary); }
.protokolltabelle table { width: 100%; border-collapse: collapse; font-size: clamp(.7rem, .85vw, .95rem); font-variant-numeric: tabular-nums; }
/* Alles in beiden Tabellen links und oben, genau einmal gesetzt. */
.protokolltabelle :is(th, td), .protokolldetail .felder :is(th, td) { text-align: left; vertical-align: top; }

.protokolltabelle th { font-weight: 700; padding: .35em .6em; background: var(--color-bg-secondary); color: var(--color-text-primary); white-space: nowrap; position: sticky; top: 0; }
.protokolltabelle th button { font: inherit; font-weight: 700; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.protokolltabelle th button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.protokolltabelle td { padding: .3em .6em; border-top: 1px solid var(--color-border); color: var(--color-text-primary); }
.protokolltabelle .zeit, .protokolltabelle .dienst { white-space: nowrap; }
.protokolltabelle .modell { white-space: nowrap; }
.protokolltabelle .prompt { max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protokolltabelle .zahl { white-space: nowrap; }
.protokolltabelle a { color: var(--color-primary); }
.protokolltabelle .leer { color: var(--color-text-muted); padding: 1.2em; }
.protokolltabelle tr.fehler .prompt a { color: #b02a37; font-weight: 600; }

/* Detailseite: eine eigene Seite, deshalb eigener Rahmen. */
.protokolldetail { margin: 0 auto; padding: var(--space-6) var(--space-8); max-width: 100ch; }
.protokolldetail header { display: flex; flex-direction: column; gap: .3em; margin-bottom: var(--space-6); }
.protokolldetail header a { color: var(--color-primary); font-size: .9rem; }
.protokolldetail h1 { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.8rem); color: var(--color-text-primary); }
.protokolldetail .felder { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: var(--space-6); }
.protokolldetail .felder th { font-weight: 700; padding: .3em 1em .3em 0; white-space: nowrap; width: 24ch; }
.protokolldetail .felder td { padding: .3em 0; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.protokolldetail .felder tr:first-child th, .protokolldetail .felder tr:first-child td { border-top: 0; }
.protokolldetail .block { margin-bottom: var(--space-6); }
.protokolldetail .block h2 { margin: 0 0 .4em; font-size: 1rem; color: var(--color-text-primary); }
.protokolldetail .block pre { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg-secondary); white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.45; }
.protokolldetail .leer { color: var(--color-text-muted); }

.protokolltabelle .lauf button { font: inherit; background: none; color: var(--color-primary); border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.protokolldetail .felder td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .protokolldetail { padding: var(--space-3); }
    .protokolldetail .felder th { width: auto; white-space: normal; }
}