/* TicketHub – Anwendungs-Stile auf Basis des Renauer-Design-Systems
   (Tokens: css/renauer-tokens.css, Regeln: docs/design/README.md). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-2);
}

/* ---------- App-Rahmen ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.app-kopf {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-2);
}
.app-kopf-innen {
  max-width: 1200px; margin: 0 auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
}
.app-marke { text-decoration: none; border: 0; display: flex; align-items: center; gap: var(--sp-3); }
.app-titel {
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--brand-blue);
  letter-spacing: -0.01em;
}
.app-logo { height: 22px; display: block; }
.app-nav {
  display: flex; gap: var(--sp-4); flex: 1; align-items: center;
  /* Seit v0.39 kurz (3 Links + "Mehr"): kein Scroll-Container mehr, sonst würde
     das absolut positionierte "Mehr"-Panel an der Nav-Kante abgeschnitten. */
  overflow: visible; white-space: nowrap;
}
.app-nav a {
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--fg-2);
  text-decoration: none; border: 0; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-1);
}
.app-nav a:hover { color: var(--brand-blue-deep); background: var(--brand-blue-tint); }
.app-nav a.active { color: var(--brand-blue); font-weight: var(--fw-semi); }
.app-benutzer { display: flex; align-items: center; gap: var(--sp-3); }
.app-benutzer-name { font-size: var(--fs-small); color: var(--fg-2); }
.app-benutzer form { margin: 0; }

/* Fokus-Master-Schalter (Ticketliste: Meine vs. Gesamt) */
.fokus-schalter {
  display: flex; margin: 0;
  border: 1px solid var(--brand-blue); border-radius: var(--radius-2);
  overflow: hidden;
}
.fokus-schalter a {
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--fg-2); padding: var(--sp-1) var(--sp-3);
  text-decoration: none;
}
.fokus-schalter a.aktiv {
  background: var(--brand-blue); color: #fff; font-weight: var(--fw-semi);
}
.fokus-schalter a:not(.aktiv):hover { background: var(--brand-blue-tint); color: var(--brand-blue-deep); }

.app-inhalt {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: var(--sp-5);
}

.app-fuss {
  border-top: 1px solid var(--border-1);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-micro); color: var(--fg-3); text-align: center;
}

/* ---------- Anmeldeseiten ---------- */
.anmelde-seite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); padding: var(--sp-5);
}
.anmelde-karte {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2);
  box-shadow: var(--shadow-2); padding: var(--sp-6); width: 100%; max-width: 420px;
}
.anmelde-kopf {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.anmelde-logo { height: 28px; display: block; }
.anmelde-titel {
  font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--brand-blue);
  letter-spacing: -0.01em;
}

/* ---------- Formulare ---------- */
.feld { margin-bottom: var(--sp-4); }
.feld label {
  display: block; font-size: var(--fs-small); font-weight: var(--fw-semi);
  color: var(--fg-2); margin-bottom: var(--sp-1);
}
.feld input, .feld textarea, .feld select {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--fs-body);
  border: 1px solid var(--border-2); border-radius: var(--radius-1);
  background: var(--bg-1); color: var(--fg-1);
}
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}

.knopf {
  display: inline-block; padding: var(--sp-2) var(--sp-4);
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semi);
  border: 1px solid var(--brand-blue); border-radius: var(--radius-2);
  background: var(--brand-blue); color: var(--fg-on-brand); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.knopf:hover { background: var(--brand-blue-deep); }
.knopf-zweit {
  background: var(--bg-1); color: var(--brand-blue);
}
.knopf-zweit:hover { background: var(--brand-blue-tint); }
.knopf-leise {
  background: transparent; color: var(--fg-2); border-color: var(--border-2);
  padding: var(--sp-1) var(--sp-3);
}
.knopf-leise:hover { background: var(--bg-2); color: var(--fg-1); }
.knopf-gefahr { border-color: var(--status-crit); background: var(--status-crit); }
.knopf-gefahr:hover { background: #8C1E1E; }

/* FocusOnNavigate setzt den Fokus aus Barrierefreiheitsgründen auf die Überschrift –
   der sichtbare Fokusrahmen ist dort nur Störung. */
h1:focus, h2:focus, h3:focus { outline: none; }

/* Blazor-Validierung im Design-System-Stil */
.validation-errors {
  list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--status-crit); background: var(--status-crit-bg);
  font-size: var(--fs-small);
}
.validation-message { display: block; font-size: var(--fs-micro); color: var(--status-crit); margin-top: var(--sp-1); }
.feld input.invalid, .feld textarea.invalid { border-color: var(--status-crit); }

.feld-erklaerung {
    font-size: var(--fs-small);
    color: var(--fg-2);
    margin: var(--sp-1) 0 0;
}

.hinweis-fehler {
  border-left: 3px solid var(--status-crit); background: var(--status-crit-bg);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  font-size: var(--fs-small); color: var(--fg-1);
}
.hinweis-info {
  border-left: 3px solid var(--brand-blue); background: var(--brand-blue-tint);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
}

/* ---------- Badges & Ampeln ---------- */
.badge {
  display: inline-block; padding: 2px 10px;
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  border-radius: var(--radius-1); border: 1px solid var(--border-2);
  background: var(--bg-2); color: var(--fg-2);
  white-space: nowrap;
}
.badge-offen { background: var(--status-crit-bg); color: var(--status-crit); border-color: var(--status-crit); }
.badge-neu { background: var(--status-info-bg); color: var(--status-info); border-color: var(--status-info); }
.badge-inarbeit { background: var(--brand-blue-tint); color: var(--brand-blue-deep); border-color: var(--brand-blue-soft); }
.badge-warten { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); }
.badge-geschlossen { background: var(--status-ok-bg); color: var(--status-ok); border-color: var(--status-ok); }
.badge-updated { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); }
/* Für satzlange dynamische Badge-Texte (Cash-Anzeige, Versand-Status): umbrechen statt 400px-nowrap. */
.badge-lang { white-space: normal; text-align: left; line-height: 1.4; }

.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ampel-gruen { background: var(--status-ok); }
.ampel-gelb { background: var(--status-warn); }
.ampel-rot { background: var(--status-crit); }

/* ---------- Kacheln (Dashboard) ---------- */
.kachel-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.kachel {
  display: block; text-decoration: none; border: 1px solid var(--border-1);
  border-radius: var(--radius-2); background: var(--bg-1); padding: var(--sp-4);
  transition: border-color var(--dur-base) var(--ease-out);
}
.kachel:hover { border-color: var(--brand-blue); }
.kachel-zahl { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--brand-blue); }
.kachel-titel {
  font-size: var(--fs-micro); font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2);
}

/* ---------- Tabellen & Karten ---------- */
.karte {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
  /* Breite Tabellen scrollen innerhalb der Karte statt die Seite aufzudrücken. */
  overflow-x: auto;
}
.karte h2 { margin-top: 0; font-size: var(--fs-h3); }

/* Einklappbarer Jahresblock (v0.45, kopf-details-Muster): Titel wie eine h2,
   Kennzahlen-Einzeiler daneben - dem Team war die offene Karte zu dominant. */
.jahres-karte > summary { cursor: pointer; }
.jahres-karte .jahres-titel { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.jahres-karte > summary:hover .jahres-titel { color: var(--brand-blue); }

table.liste { background: var(--bg-1); width: 100%; }
table.liste tbody tr:hover td { background: var(--brand-blue-tint); }
table.liste a { font-weight: var(--fw-semi); }
/* Datums-, Nummern- und Kopfzellen brechen nie um – Textspalten behalten den Umbruch. */
table.liste th, table.liste td.mono { white-space: nowrap; }
/* Lange Textspalten (Thema, Betreff, Tätigkeit): lesbar umbrechen statt zerquetschen. */
table.liste td.zelle-breit { min-width: 240px; }
td.mono, .mono { font-family: var(--font-mono); font-size: 0.92em; }

.aktionen { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.aktionen form { margin: 0; }
form.aktionen { margin: 0; }
/* Aktions-Zellen bleiben echte Tabellenzellen: display:flex am td würde es aus dem
   Tabellenlayout reißen - seine Trennlinie klebte dann am Inhalt statt an der
   Zeilenunterkante (sichtbar neben hohen Zellen wie der KI-Zeile der Quarantäne). */
table.liste td.aktionen { display: table-cell; white-space: nowrap; }
table.liste td.aktionen > form { display: inline-flex; margin: 0; }
table.liste td.aktionen > * + * { margin-left: var(--sp-2); }
/* In Tabellenzellen bleiben Zeilen-Buttons nebeneinander – die Tabelle scrollt stattdessen. */
td.aktionen { flex-wrap: nowrap; }

/* Kompakte Eingaben/Selects in Filter- und Aktionszeilen (statt wiederholter Inline-Styles). */
.eingabe-inline {
  padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--fs-small);
  border: 1px solid var(--border-2); border-radius: var(--radius-1);
  background: var(--bg-1); color: var(--fg-1);
}
.eingabe-inline:focus-visible {
  outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue);
}

/* Dezente Sicherheits-/Kontakt-Fußnote unter Anmeldeformularen: bewusst leise –
   eine feine Trennlinie, kleine gedämpfte Schrift, kein Kasten, kein Alarmrot. */
.anmelde-fussnote {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
  font-size: var(--fs-micro); color: var(--fg-3); line-height: 1.5;
}
.anmelde-fussnote a { color: var(--fg-2); }

/* Portal-Kennzeichnung im Kopf */
.portal-marke {
  font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: var(--ls-caps); margin-left: 4px;
}

/* Nur für Screenreader sichtbar (Labels von Filterfeldern u. Ä.). */
.sr-nur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.seiten-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.seiten-kopf h1 { margin: 0; font-size: var(--fs-h2); }
/* .meta gilt überall (Outbox-Fehlertext, Hinweise), nicht nur im Seitenkopf. */
.meta { font-size: var(--fs-small); color: var(--fg-3); }

.leer-hinweis { color: var(--fg-3); font-size: var(--fs-body); padding: var(--sp-5) 0; }

/* Callout für Kunden-Support-Anweisungen (Design-System) */
.callout {
  border-left: 3px solid var(--brand-blue); background: var(--brand-blue-tint);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}

@media (max-width: 720px) {
  .app-kopf-innen { flex-wrap: wrap; gap: var(--sp-3); }
  .app-logo { display: none; }
  .app-inhalt { padding: var(--sp-3); }
  .karte { padding: var(--sp-4); }
  .seiten-kopf h1 { font-size: var(--fs-h3); }
}

/* Touch-Geräte: größere Ziele und mehr Abstand zwischen Zeilen-Aktionen. */
@media (pointer: coarse) {
  .knopf, .fokus-schalter a { min-height: 44px; }
  .app-nav a { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .aktionen { gap: var(--sp-3); }
}

/* Kompakter Ticket-Kopf (SPEC 8.2, v0.24): nativer Aufklapper. */
.kopf-details summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}
.kopf-details summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid var(--fg-2);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}
.kopf-details[open] summary::before { transform: rotate(90deg); }
.kopf-details[open] summary { margin-bottom: var(--sp-3); }

/* Gerenderte Worklog-Markdown-Texte: kompakte Typografie in Tabellenzellen. */
.markdown p { margin: 0 0 var(--sp-2); }
.markdown p:last-child, .markdown ul:last-child, .markdown ol:last-child { margin-bottom: 0; }
.markdown ul, .markdown ol { margin: 0 0 var(--sp-2); padding-left: 1.2em; }
.markdown code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
    background: var(--bg-2, rgba(0, 0, 0, 0.05));
    padding: 0 3px;
    border-radius: 2px;
}
.markdown pre { overflow-x: auto; }

/* Anhang-Chips (SPEC 8, v0.31): Outlook-artige Datei-Kacheln, Klick = Download. */
.anhang-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.anhang-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border-1); border-radius: var(--radius-2);
    background: var(--bg-2, rgba(0, 0, 0, 0.03));
    text-decoration: none; color: inherit;
    font-size: var(--fs-small); max-width: 100%;
}
.anhang-chip:hover { border-color: var(--brand-blue); color: var(--brand-blue-deep); }
.anhang-chip .anhang-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.anhang-chip .anhang-groesse { color: var(--fg-3); white-space: nowrap; }
.icon-klein { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; }

/* "Mehr"-/Konto-Menü in der Kopfleiste (v0.39): natives details/summary, CSP-fest. */
.nav-menue { position: relative; display: inline-block; }
.nav-menue > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 6px;
    /* Bewusst identisch zu .app-nav a - die Trigger stehen bündig in der Linkzeile. */
    padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-1);
    font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--fg-2);
    line-height: inherit;
}
.nav-menue > summary::-webkit-details-marker { display: none; }
.nav-menue > summary::after { content: "▾"; font-size: 0.7em; opacity: 0.7; }
.nav-menue[open] > summary, .nav-menue > summary:hover {
    color: var(--brand-blue-deep); background: var(--brand-blue-tint);
}
.nav-menue-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    min-width: 230px; padding: var(--sp-2) 0;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--radius-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.nav-menue-rechts .nav-menue-panel { left: auto; right: 0; }
.nav-menue-panel a, .nav-menue-panel button {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%; padding: var(--sp-2) var(--sp-4);
    background: none; border: 0; text-align: left; cursor: pointer;
    color: inherit; text-decoration: none; font: inherit; white-space: nowrap;
}
.nav-menue-panel a:hover, .nav-menue-panel button:hover { background: rgba(50, 60, 141, 0.08); }
.nav-menue-panel form { margin: 0; }
.nav-gruppe {
    display: block; padding: var(--sp-2) var(--sp-4) var(--sp-1);
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-3);
}
.nav-gruppe:not(:first-child) { border-top: 1px solid var(--border-1); margin-top: var(--sp-1); padding-top: var(--sp-3); }
/* Störungsanzeige: Punkt am Menü, Zahl am Eintrag - sichtbar trotz aufgeräumter Leiste. */
.stoerungs-punkt {
    width: 8px; height: 8px; border-radius: 50%;
    background: #C4382E; display: inline-block; flex-shrink: 0;
}
.stoerungs-zahl {
    margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px;
    background: #C4382E; color: #fff; font-size: 0.72rem; line-height: 20px;
    text-align: center;
}

/* KI-Einschätzung in der Quarantäne-Liste (v0.39): Badges und Zusammenfassung je in
   eigener Zeile unterm Betreff; der Text bricht ungekürzt um (kein nowrap/ellipsis),
   damit die Spalte schmale Screens nicht aufdrückt. */
.ki-zeile {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin-top: var(--sp-1);
}
.ki-kurztext {
    color: var(--fg-3); font-size: var(--fs-small);
    margin-top: var(--sp-1);
    overflow-wrap: anywhere; max-width: 72ch;
}

/* Jahresblock am Dashboard und Statistik-Balken (SPEC 12, v0.40): dezente CSS-Grafik,
   Markenblau auf grauer Spur - bewusst keine Chart-Bibliothek. */
.jahres-kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.jahres-kachel .kachel-zahl { font-size: 1.7rem; font-weight: var(--fw-semi); }
.anteil-balken {
    height: 6px; border-radius: 3px; background: var(--border-1);
    margin-top: var(--sp-2); overflow: hidden;
}
.anteil-fuellung { height: 100%; border-radius: 3px; background: var(--brand-blue); }

.monats-leiste {
    display: flex; align-items: flex-end; gap: var(--sp-2);
    height: 96px; margin-bottom: var(--sp-2);
}
.monats-spalte {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; min-width: 0;
}
.monats-balken {
    width: 100%; max-width: 34px; border-radius: 3px 3px 0 0;
    background: var(--brand-blue); opacity: 0.45;
}
.monats-balken.aktuell { opacity: 1; }
.monats-label { font-size: 0.7rem; color: var(--fg-3); margin-top: 4px; }

.hbalken { display: flex; align-items: center; gap: var(--sp-2); min-width: 160px; }
.hbalken-spur {
    flex: 1; height: 8px; border-radius: 4px; background: var(--border-1); overflow: hidden;
}
.hbalken-fuellung { height: 100%; border-radius: 4px; background: var(--brand-blue); }
.hbalken-wert { font-size: var(--fs-small); color: var(--fg-2); white-space: nowrap; min-width: 56px; text-align: right; }
.statistik-tabelle td:first-child { white-space: nowrap; }

/* KI-Kurzfassung im Ticket-Kopf (v0.42): getönter Einschub mit Markenkante - klar
   abgegrenzt vom Original-Text der Anfrage, der als freier Fließtext folgt. */
.ki-kasten {
    background: var(--brand-blue-tint);
    border-left: 3px solid var(--brand-blue);
    border-radius: var(--radius-1);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-4) 0;
}
.ki-kasten-kopf {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--brand-blue-deep);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: var(--sp-1);
}
.ki-kasten-kopf .meta { text-transform: none; letter-spacing: normal; font-weight: normal; }