/* Viel Text, wenig Abstand. Farbe nur für Bedeutung. */
:root {
  --bg: #fff;
  --surface: #f5f5f4;
  --line: #ddd;
  --fg: #1c1c1c;
  --muted: #6b6b6b;
  --link: #1d4ed8;
  --selected: #e3ebfd;
  --working: #2563eb;
  --active: #16a34a;
  --hold: #d97706;
  --inactive: #dc2626;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18181b;
    --surface: #202024;
    --line: #34343a;
    --fg: #e4e4e7;
    --muted: #9a9aa3;
    --link: #8ab4ff;
    --selected: #26324a;
    --working: #60a5fa;
    --active: #22c55e;
    --hold: #fbbf24;
    --inactive: #f87171;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  grid-template-columns: 8.5rem minmax(16rem, 24rem) minmax(16rem, 22rem) 1fr;
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 15px; margin: 0 0 .5rem; line-height: 1.25; }
.info h1:has(+ .ref) { margin-bottom: .15rem; }
.ref { margin: 0 0 .5rem; font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); user-select: all; cursor: text; }
h2 { font-size: 12px; margin: .9rem 0 .3rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
code { font-size: 12px; }
.empty { color: var(--muted); padding: .5rem .6rem; margin: 0; }

.col { height: 100vh; overflow-y: auto; border-right: 1px solid var(--line); }
.col:last-child { border-right: 0; }

/* Menü */
.menu { background: var(--surface); padding: .4rem 0; display: flex; flex-direction: column; }
.menu a.bottom { color: var(--muted); }
.menu a.bottom:not(.bottom ~ .bottom) { margin-top: auto; } /* nur der erste schiebt nach unten */
.menu .brand { font-weight: 700; padding: .2rem .6rem .5rem; }
.menu a { display: block; padding: .2rem .6rem; color: var(--fg); }
.menu a.on { background: var(--selected); font-weight: 600; }

/* Liste */
.list .head { position: sticky; top: 0; background: var(--bg); padding-top: .4rem; border-bottom: 1px solid var(--line); }
.list form { padding: 0 .5rem .3rem; }
.list input[type=search] {
  width: 100%; font: inherit; padding: .25rem .4rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg); color: var(--fg);
}
.filter { display: flex; gap: .2rem; padding: 0 .5rem .3rem; flex-wrap: wrap; }
.filter a { padding: 0 .35rem; border-radius: 3px; color: var(--muted); }
.filter a span { font-variant-numeric: tabular-nums; }
.filter a.on { background: var(--selected); color: var(--fg); }
.list ol { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.list li a { display: block; padding: .25rem .5rem; color: var(--fg); }
.list li a:hover { background: var(--surface); text-decoration: none; }
.list li.selected a { background: var(--selected); }
.list .title { display: block; }
.list .line2 { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.status { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .3rem; vertical-align: .05rem; }
.status.working { background: var(--working); }
.status.active { background: var(--active); }
.status.on-hold { background: var(--hold); }
.status.inactive { background: var(--inactive); }
.deadline.expired { text-decoration: line-through; }

/* Info */
.info { padding: .5rem .6rem; }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: 0; }
.info dt { color: var(--muted); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.cpv, .stages, .findings { list-style: none; margin: 0; padding: 0; }
.cpv li, .stages li { padding: .1rem 0; overflow-wrap: anywhere; }
.findings li { padding: .15rem 0; }
.findings .muted .rating { min-width: 0; }
.findings .quote { display: block; padding-left: 1.6em; color: var(--muted); font-size: 12px; }
.stages li.rejected { color: var(--inactive); }
.stages li.on-hold { color: var(--hold); }
.list .line2.reason { color: var(--hold); }
.line2 .stage { font-size: 11px; }
.filter.switch { padding-bottom: .15rem; }
.filter.switch a { font-weight: 600; }
.filter.check a.on { background: none; color: var(--fg); }

/* Inhalt rechts: Rand für alles in der Spalte */
.content { padding: .5rem .8rem; }
.content .empty { padding: 0; }
.content > h2:first-child { margin-top: 0; }
.content .text { max-width: 60rem; }
.content .text p { margin: 0 0 .35em; }
.content .text .label { color: var(--muted); }

/* DB */
.fields { border-collapse: collapse; width: 100%; }
.fields th { text-align: left; color: var(--muted); font-weight: normal; border-bottom: 1px solid var(--line); }
.fields td, .fields th { padding: .1rem .5rem .1rem 0; vertical-align: top; }
.muted { color: var(--muted); }
.content .sql { margin: 0 0 .5rem; font-size: 12px; white-space: pre-wrap; }

/* Begriffe */
.list h3.group { margin: 0; padding: .5rem .5rem .2rem; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
.list h3.group span { font-variant-numeric: tabular-nums; }
.list ol + h3.group { margin-top: .9rem; border-top: 2px solid var(--line); }
.rating { display: inline-block; min-width: 1.6em; font-weight: 600; font-variant-numeric: tabular-nums; }
.rating.plus { color: var(--active); }
.rating.minus { color: var(--inactive); }
.rating.zero, .rating.unrated { color: var(--muted); }
.list.terms .line2 { padding-left: 1.6em; }
.fields.names { width: auto; }
.content .keywords { margin: 0 0 .5rem; }
.added { font-style: italic; color: var(--working); }

/* Unterlagen */
details.section { margin: 0 0 .6rem; }
details.section > summary { cursor: pointer; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: .1rem 0 .25rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
details.section > summary .muted { text-transform: none; letter-spacing: 0; }
details.section > p { margin: 0 0 .35em; }
details.folder { margin: 0 0 .15rem; }
details.folder > summary { cursor: pointer; font-weight: 600; }
details.folder > summary .muted { font-weight: normal; }
details.folder > details.folder, details.folder > .files { margin-left: 1.1rem; }
.files { list-style: none; margin: 0 0 .3rem; padding: 0; }
.files li { padding: .05rem 0; overflow-wrap: anywhere; }
.files li.selected { background: var(--selected); }
.files .muted { font-size: 12px; white-space: nowrap; }
.files .download { text-decoration: none; padding: 0 .2rem; }
.message { margin: 0 0 .6rem; max-width: 60rem; }
.message p { margin: 0 0 .35em; }
.message .subject { margin-bottom: .15em; }
.content.viewer { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.viewer .bar { padding: .3rem .8rem; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; align-items: baseline; }
.viewer .bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.viewer .bar .links { white-space: nowrap; }
.viewer iframe { flex: 1; border: 0; width: 100%; background: #fff; }
/* Solange eine Datei angezeigt wird, sind Liste und Info schmaler. */
body:has(.viewer) { grid-template-columns: 8.5rem minmax(12rem, 16rem) minmax(14rem, 18rem) 1fr; }

/* Prompts */
.content .prompt { margin: 0; max-width: 60rem; font: inherit; white-space: pre-wrap; }
.order { margin: 0; padding-left: 1.4rem; }
.order li { padding: .05rem 0; color: var(--muted); }
.order li.here { color: var(--fg); font-weight: 600; }
.info > p { margin: 0 0 .35em; }

/* Zugang: wer angemeldet ist, unten im Menü; Seite zur Anmeldung */
.menu .user { margin: .4rem 0 0; padding: .4rem .6rem .1rem; border-top: 1px solid var(--line); }
.menu .user span { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.menu .user button { all: unset; cursor: pointer; color: var(--muted); }
.menu .user button:hover { color: var(--link); text-decoration: underline; }
body.login { display: flex; align-items: center; justify-content: center; }
.login form { width: 17rem; display: flex; flex-direction: column; gap: .6rem; }
.login label { display: flex; flex-direction: column; gap: .15rem; color: var(--muted); }
.login input { font: inherit; padding: .3rem .4rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 3px; }
.login button { font: inherit; padding: .35rem; cursor: pointer; }
.login .error { margin: 0; color: var(--inactive); }

/* Empfehlung */
.rec { display: inline-block; padding: 0 .4rem; border-radius: 3px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.rec.passed { background: var(--active); }
.rec.on-hold { background: var(--hold); }
.rec.rejected { background: var(--inactive); }
.verdict { margin: 0 0 .5rem; max-width: 60rem; }
.verdict .rec { font-size: 13px; padding: .05rem .5rem; margin-right: .3rem; }
.md { max-width: 60rem; }
.md h2, .md h3, .md h4 { font-size: 12px; margin: .8rem 0 .25rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.md p { margin: 0 0 .4em; }
.md ul, .md ol { margin: 0 0 .4em; padding-left: 1.3rem; }
.md li { padding: .05rem 0; }
table.md { border-collapse: collapse; margin: 0 0 .5rem; }
table.md th { text-align: left; color: var(--muted); font-weight: normal; border-bottom: 1px solid var(--line); }
table.md td, table.md th { padding: .1rem .8rem .1rem 0; vertical-align: top; }
table.md td { border-bottom: 1px solid var(--line); }