/* LiSA Support-Portal – gemeinsames Stylesheet.
   Farben/Logo anpassen: nur die Variablen im Block "Marke" ändern und static/brand/logo.svg ersetzen. */

:root {
  /* Marke */
  --brand: #1f4e8c;           /* Aktionen, Links, aktive Elemente */
  --brand-ink: #ffffff;       /* Text auf --brand */
  --brand-soft: #e3ebf6;
  /* Grundfarben */
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --ink: #1b2733;
  --muted: #5b6b7a;
  --line: #d3dae1;
  --focus: #2f6fd0;
  /* Sicherheit / Status */
  --hazard: #e8a317;
  --hazard-soft: #fdf3dc;
  --hazard-ink: #6b4a00;
  --ok: #1e7a4c;
  --ok-soft: #e1f2e9;
  --danger: #b3261e;
  --danger-soft: #fbe5e3;
  /* Anzeige-Chip für Fehlercodes (wie das Display der Steuerung) */
  --display-bg: #22313f;
  --display-ink: #f2b33d;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(27, 39, 51, .08), 0 4px 16px rgba(27, 39, 51, .06);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #6f9fe0; --brand-ink: #0c1420; --brand-soft: #1d2b3e;
    --bg: #121820; --surface: #1a222c; --surface-2: #202a35; --ink: #e3e8ee; --muted: #9aa8b6;
    --line: #2e3a47; --focus: #8ab4f0; --hazard-soft: #3a2e12; --hazard-ink: #f3cf7a;
    --ok-soft: #173327; --ok: #6fcf9c; --danger-soft: #3d1c1a; --danger: #f08b84;
    --display-bg: #0b1118; --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #6f9fe0; --brand-ink: #0c1420; --brand-soft: #1d2b3e;
  --bg: #121820; --surface: #1a222c; --surface-2: #202a35; --ink: #e3e8ee; --muted: #9aa8b6;
  --line: #2e3a47; --focus: #8ab4f0; --hazard-soft: #3a2e12; --hazard-ink: #f3cf7a;
  --ok-soft: #173327; --ok: #6fcf9c; --danger-soft: #3d1c1a; --danger: #f08b84;
  --display-bg: #0b1118; --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.mt { margin-top: 1.2rem; }

/* --- Knöpfe & Formulare ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4em; padding: .48em .95em; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none;
  color: var(--ink); white-space: nowrap; line-height: 1.3;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.hazard { background: var(--hazard); border-color: var(--hazard); color: #2b1e00; font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: .25em .6em; font-size: .86rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; cursor: pointer; padding: .3em .4em; border-radius: 4px; color: var(--muted); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

label.field { display: grid; gap: .25em; font-size: .9rem; color: var(--muted); }
label.field > span.req::after { content: " *"; color: var(--danger); }
input[type=text], input[type=tel], input[type=email], input[type=search], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: .5em .65em; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.radio-row { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--ink); }
.radio-row label { display: inline-flex; gap: .35em; align-items: center; cursor: pointer; }

/* --- Kopfzeile --------------------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 1rem; height: 56px; padding: 0 1rem;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 650; }
.brand img { height: 30px; width: auto; display: block; }
.brand .area { font-weight: 500; color: var(--muted); padding-left: .6rem; border-left: 1px solid var(--line); }
.topnav { display: flex; gap: .2rem; overflow-x: auto; }
.topnav a {
  padding: .45em .8em; border-radius: var(--radius); text-decoration: none; color: var(--muted); white-space: nowrap;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav a.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.topnav .count { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .3em; border-radius: 9px;
  background: var(--hazard); color: #2b1e00; font-size: .78rem; text-align: center; font-weight: 700; }
.userbox { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }

/* --- App-Gerüst mit Seitenleiste ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 56px); }
.sidebar { border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.sidebar .head { padding: .8rem; }
.conv-list { list-style: none; margin: 0; padding: 0 .5rem .8rem; overflow-y: auto; flex: 1; }
.conv-list li { display: flex; align-items: center; border-radius: var(--radius); }
.conv-list li a { flex: 1; padding: .5em .6em; text-decoration: none; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
.conv-list li:hover { background: var(--surface-2); }
.conv-list li.active { background: var(--brand-soft); }
.conv-list li.active a { color: var(--brand); font-weight: 600; }
.conv-list li .icon-btn { visibility: hidden; }
.conv-list li:hover .icon-btn, .conv-list li.active .icon-btn { visibility: visible; }
.conv-list .tag { font-size: .72rem; color: var(--muted); margin-left: .3em; }
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* --- Chat ------------------------------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 1.5rem 1rem 1rem; }
.chat-col { max-width: 760px; margin: 0 auto; }
.msg { margin: 0 0 1.4rem; }
.msg.user .bubble {
  background: var(--brand-soft); border-radius: var(--radius); padding: .65em .9em; margin-left: auto;
  width: fit-content; max-width: 85%; white-space: pre-wrap;
}
.msg.assistant .bubble { padding: 0 .1em; }
.msg .meta { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; color: var(--muted); font-size: .82rem; }
.msg .meta .fb.on { color: var(--brand); background: var(--brand-soft); }
.msg.blocked .bubble, .note-hazard {
  border-left: 4px solid var(--hazard); background: var(--hazard-soft); color: var(--ink);
  padding: .7em .9em; border-radius: 0 var(--radius) var(--radius) 0;
}
.msg.error .bubble { border-left: 4px solid var(--danger); background: var(--danger-soft); padding: .6em .9em; border-radius: 0 var(--radius) var(--radius) 0; }
.typing { color: var(--muted); font-size: .9rem; }
.typing::after { content: "…"; animation: blink 1.2s steps(3, end) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .typing::after { animation: none; } }

.composer { border-top: 1px solid var(--line); background: var(--surface); padding: .8rem 1rem; }
.composer form { max-width: 760px; margin: 0 auto; display: flex; gap: .6rem; align-items: flex-end; }
.composer textarea { min-height: 2.8em; max-height: 14em; }
.composer .hint { max-width: 760px; margin: .45rem auto 0; font-size: .8rem; color: var(--muted); }

.empty-state { max-width: 560px; margin: 8vh auto 0; }
.empty-state h1 { font-size: 1.6rem; }
.examples { display: grid; gap: .5rem; margin-top: 1.2rem; }
.examples button {
  text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  padding: .65em .9em; cursor: pointer;
}
.examples button:hover { border-color: var(--brand); }

/* Markdown in Antworten */
.md p { margin: .45em 0; }
.md h1, .md h2, .md h3, .md h4 { font-size: 1rem; margin: 1em 0 .3em; }
.md ul, .md ol { padding-left: 1.3em; margin: .35em 0; }
.md li { margin: .15em 0; }
.md code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .05em .3em; border-radius: 3px; }
.md pre { background: var(--surface-2); padding: .7em; border-radius: var(--radius); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: .5em 0; font-size: .92rem; }
.md th, .md td { border: 1px solid var(--line); padding: .3em .55em; text-align: left; }

/* Das eine prägnante Element: Fehlercodes wie auf dem Display der Steuerung */
.code-chip {
  font-family: var(--mono); font-size: .86em; font-weight: 600; letter-spacing: .02em;
  background: var(--display-bg); color: var(--display-ink); padding: .08em .45em; border-radius: 3px;
  white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(242, 179, 61, .18);
}

/* Quellen */
.sources { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; font-size: .85rem; }
.sources summary { cursor: pointer; color: var(--muted); }
.sources ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .35rem; }
.sources li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: baseline; }
.kind { font-size: .74rem; padding: .05em .45em; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.kind.loesung { border-color: var(--ok); color: var(--ok); }
.kind.diagnose { border-color: var(--hazard); color: var(--hazard-ink); }
.score { font-variant-numeric: tabular-nums; color: var(--muted); }
.workaround { color: var(--hazard-ink); background: var(--hazard-soft); padding: .1em .4em; border-radius: 3px; display: inline-block; margin: .15em .2em 0 0; }

/* --- Panels, Tabellen, Seiten ----------------------------------------------------------------- */
.page { max-width: 1240px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-size: 1.05rem; }
.grid-2 + .panel { margin-top: 1rem; }
.grid-2 > .panel + .panel, .grid-2 > div > .panel:first-child { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .8rem; }
.toolbar label.field { min-width: 130px; flex: 1; }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th { text-align: left; font-weight: 600; color: var(--muted); font-size: .82rem; padding: .5em .6em; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.list td { padding: .55em .6em; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: var(--surface-2); }
.status { display: inline-block; font-size: .8rem; padding: .08em .5em; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.status.eskaliert { background: var(--hazard-soft); border-color: var(--hazard); color: var(--hazard-ink); font-weight: 600; }
.status.erledigt { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.status.neu { border-color: var(--brand); color: var(--brand); }
.prio-dringend { color: var(--danger); font-weight: 700; }
.prio-hoch { color: var(--hazard-ink); font-weight: 600; }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .7rem; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.timeline li { padding: .45em 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.transcript { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; background: var(--surface-2); font-size: .9rem; }
.transcript .who { font-weight: 600; font-size: .8rem; color: var(--muted); margin-top: .5rem; }

/* Anruf-Arbeitsplatz */
.call-shell { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 56px); }
.call-main { display: flex; flex-direction: column; min-height: 0; }
.call-main > .main { flex: 1; }
.call-side { border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 1rem; }
.call-head { padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.call-actions { margin-left: auto; }
.call-timer { font-variant-numeric: tabular-nums; font-family: var(--mono); color: var(--muted); }
.match { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-top: .5rem; background: var(--surface); }
.match.open { border-color: var(--hazard); background: var(--hazard-soft); }

/* Dialoge, Meldungen */
dialog { border: 1px solid var(--line); border-radius: 8px; padding: 0; width: min(760px, calc(100vw - 2rem)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(18, 24, 32, .45); }
dialog .dlg-head { padding: 1rem 1.2rem .4rem; }
dialog .dlg-body { padding: .4rem 1.2rem 1rem; max-height: 70vh; overflow-y: auto; }
dialog .dlg-foot { padding: .8rem 1.2rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 100; max-width: 380px; }
.toast { background: var(--ink); color: var(--bg); padding: .7em 1em; border-radius: var(--radius); box-shadow: var(--shadow); }
.toast.error { background: var(--danger); color: #fff; }
.toast.call { background: var(--surface); color: var(--ink); border: 2px solid var(--hazard); }
.banner { padding: .6em 1em; background: var(--hazard-soft); color: var(--hazard-ink); border-bottom: 1px solid var(--hazard); font-size: .9rem; }

/* Statistik */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; border-bottom: 1px solid var(--line); padding-top: .5rem; }
.bars .bar { flex: 1; min-width: 3px; max-width: 28px; display: flex; flex-direction: column-reverse; }
.bars .bar span { display: block; }
.bars .p { background: var(--brand); }
.bars .m { background: var(--hazard); }
.legend { display: flex; gap: 1rem; font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.legend i { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .3em; vertical-align: -1px; }
.page > .row + .kpis { margin-top: .4rem; }
.page .row label.field select { width: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; background: var(--surface); }
.kpi b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .35em; background: var(--muted); }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--danger); }

/* Startseite / Meldungsseite */
.landing { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.landing .card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; box-shadow: var(--shadow); }
.landing .card img { height: 40px; margin-bottom: 1.4rem; }
.landing .choices { display: grid; gap: .7rem; margin-top: 1.4rem; }
.landing .choices a { display: block; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.landing .choices a:hover { border-color: var(--brand); }
.landing .choices a b { display: block; color: var(--brand); }

/* --- Mobil ------------------------------------------------------------------------------------- */
.only-mobile { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 56px 0 0 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; width: 86vw; max-width: 320px; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .only-mobile { display: inline-flex; }
  .call-shell { grid-template-columns: 1fr; height: auto; }
  .call-shell .chat { height: 70vh; }
  .call-main { display: flex; flex-direction: column; min-height: 0; }
.call-main > .main { flex: 1; }
.call-side { border-left: 0; border-top: 1px solid var(--line); }
  .grid-2 { grid-template-columns: 1fr; }
  .userbox .name { display: none; }
  .brand .area { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
#user { display: flex; align-items: center; gap: .5rem; }

.page.narrow { max-width: 900px; }
.mono { font-family: var(--mono); font-size: .82rem; }
.copy-row { margin-top: .7rem; display: grid; gap: .3rem; }
.copy-row .row input { flex: 1; min-width: 0; }
.userbox .name { white-space: nowrap; }