/* ventaDesk Design-System – uebernommen aus dem Stakeholder-Mockup
   (notes/venta_ticketsystem.html). Reines visuelles Vokabular, keine
   Fachlogik. */

:root {
  /* Reines Licht-Design (siehe Klassendoc oben, kein Dark-Mode-Zweig
     definiert) - ohne dieses Signal rendern Browser native Formularelemente
     (Datepicker-Popup, Checkboxen, Scrollbars) nach der OS-/Browser-
     Praeferenz des Betrachters, was z. B. bei aktivem System-Dark-Mode zu
     einem stilistisch unpassenden dunklen Kalender-Popup auf den
     Datums-Feldern fuehrte (Nutzer-Fund 05.09.2026, security_audit_log/
     list.html.twig). */
  color-scheme: light;
  --primary: #172A45;
  --primary-light: #233a5e;
  --primary-hover: #1f3554;
  --accent: #2d6cdf;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --border: #e3e7ef;
  --text: #1c2533;
  --text-muted: #6b7689;
  --success: #2e9d6e;
  --warning: #e6a23c;
  --danger: #d94c4c;
  --info: #3a8dde;
  --radius: 10px;
  --shadow: 0 2px 6px rgba(23, 42, 69, 0.06);
  --shadow-lg: 0 8px 24px rgba(23, 42, 69, 0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
/* body ist ein Flex-Container ueber genau die Viewport-Hoehe (nicht mehr) -
   .prototype-notice (TEMPORAER, siehe dortigen Hinweis) nimmt oben ihre
   natuerliche Hoehe ein, .app/.auth-page (flex: 1) fuellen exakt den Rest.
   Ohne das wuerde .app/.auth-page weiterhin ihr eigenes min-height: 100vh
   ZUSAETZLICH zur Banner-Hoehe beanspruchen - ergibt auf jeder Seite einen
   unnoetigen vertikalen Scrollbalken um genau die Banner-Hoehe. */
body { min-height: 100vh; display: flex; flex-direction: column; }

a { color: var(--accent); }

/* Layout */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
}

/* Sidebar */
.sidebar {
  background: var(--sidebar-bg, var(--primary));
  color: #fff;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  padding: 4px 24px 28px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-start;
}
.sidebar .brand-logo {
  width: 100%;
  max-width: 170px;
  height: auto;
  display: block;
}
.sidebar nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s ease;
  user-select: none;
}
.nav-item:hover { background: var(--primary-hover); color: #fff; }
.nav-item.active { background: #fff; color: var(--primary); }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar .user {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-decoration: none;
}
.sidebar .user:hover { background: rgba(255, 255, 255, 0.05); }
.sidebar .user .user-email { font-weight: 600; color: #fff; }
.sidebar .user .user-org { font-size: 12px; opacity: .7; }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.avatar-sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-sm.venta { background: var(--primary); }
.avatar-sm.unassigned { background: #c4ccd8; }

img.avatar, img.avatar-sm { object-fit: cover; }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--primary); }

.content { padding: 28px 32px; flex: 1; }
.content.narrow { max-width: 560px; }

/* Buttons */
.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { background: var(--primary-hover); }
.btn.secondary { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--bg); }
.btn.accent { background: var(--accent); }
.btn.accent:hover { background: #245bc4; }

/* Cards / Forms */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}

/* Profil-Seite (Abschnitt 56): drei Karten nebeneinander statt gestapelt, damit die volle Breite genutzt wird. */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }

/* Einstellungen-Kachelübersicht (Abschnitt 47/51, siehe
   notes/anforderungen-ticket-erweiterungen.md) - Hersteller UND
   Dienstleister nutzen dieselbe Klasse fuer Konsistenz. */
.settings-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.settings-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.settings-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.settings-tile svg { width: 32px; height: 32px; color: var(--primary); }
.settings-tile span { font-weight: 600; font-size: 14px; }

/* Hersteller-Kennzahlen auf dem Dashboard (Abschnitt 13) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-tile { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; }
.kpi-value { font-size: 32px; font-weight: 700; color: var(--text); }
.kpi-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.kpi-list-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.kpi-list-row:last-child { border-bottom: none; }
.kpi-empty { font-size: 13px; color: var(--text-muted); }

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="date"],
.form input[type="datetime-local"],
.form textarea,
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.form input:focus,
.form textarea:focus,
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.form small { color: var(--text-muted); font-size: 12px; margin-top: -8px; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-errors { list-style: none; margin: -8px 0 0; padding: 0; color: var(--danger); font-size: 12px; }

/* Rich-Text-Editor (Abschnitt 6, siehe
   notes/umsetzungsplan-rich-text-editor.md) - Toolbar + editierbarer Bereich,
   von assets/controllers/rich_text_controller.js neben der (versteckten)
   Textarea eingehaengt. ".rich-text-content"/".rich-text-rendered" teilen
   sich die Formatierungs-Regeln fuer Tabellen/Listen, damit editierte und
   spaeter schreibgeschuetzt gerenderte Inhalte (|raw) gleich aussehen. */
.rich-text-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: #fafbfd; }
.rich-text-toolbar-btn { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 4px 9px; font-size: 12px; font-family: inherit; cursor: pointer; color: var(--text); }
.rich-text-toolbar-btn:hover { background: #eef2ff; }
.rich-text-toolbar-select { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 4px 9px; font-size: 12px; font-family: inherit; cursor: pointer; color: var(--text); max-width: 180px; }
.rich-text-content img, .rich-text-rendered img { max-width: 100%; height: auto; border-radius: 4px; }
.rich-text-content { border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 10px 12px; min-height: 120px; font-size: 14px; background: var(--bg); }
.rich-text-content:focus-within { border-color: var(--accent); background: #fff; }
.rich-text-content .ProseMirror { outline: none; }
.rich-text-content table, .rich-text-rendered table { border-collapse: collapse; margin: 8px 0; }
.rich-text-content td, .rich-text-content th, .rich-text-rendered td, .rich-text-rendered th { border: 1px solid var(--border); padding: 4px 8px; }
.rich-text-content th, .rich-text-rendered th { background: #fafbfd; font-weight: 600; }
.rich-text-content ul, .rich-text-content ol, .rich-text-rendered ul, .rich-text-rendered ol { padding-left: 22px; }

/* Deutsch/Englisch nebeneinander auf der E-Mail-Vorlagen-Seite (Abschnitt 38,
   siehe notes/umsetzungsplan-email-templates.md) - eigene Klasse statt
   Wiederverwendung von .detail-grid (dessen auto-fit/minmax(180px) fuer
   viele kleine Feld/Wert-Paare gedacht ist, nicht fuer zwei breite
   Editor-Bereiche nebeneinander). */
.email-template-locales { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 24px; margin-bottom: 18px; }

/* Eigenstaendig statt an ".form" gebunden: die Bearbeiten-Dropdowns auf der
   Ticket-Seite (Prioritaet/Status/Zuweisung) sitzen im Detail-Grid, nicht in
   einem <form class="form">-Container, sollen aber trotzdem einheitlich
   aussehen. Eigener Pfeil statt Browser-Standard fuer ein moderneres Bild. */
select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 34px 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7689' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
select:hover { border-color: #c7cedb; }
select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: #fff;
}
select:disabled { cursor: not-allowed; opacity: .6; }
.form-check label { text-transform: none; font-weight: 400; font-size: 13px; }

.alert {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}
.alert.success { background: #e8f4ec; color: var(--success); }
.alert.error { background: #fde8e8; color: var(--danger); }
.alert.warning { background: #fdf3e2; color: #8a6116; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* TEMPORAER (siehe templates/shared/_prototype_notice.html.twig) - Prototyp-
   Warnhinweis oben auf jeder Seite, vor allem anderen Markup. */
.prototype-notice {
  background: #fdf3e2;
  color: #8a6116;
  padding: 8px 20px;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid #f0d9a8;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.badge.prio-hoch { background: #fde8e8; color: var(--danger); }
.badge.prio-mittel { background: #fdf3e2; color: var(--warning); }
.badge.prio-niedrig { background: #e8f4ec; color: var(--success); }
.badge.status-offen { background: #e6efff; color: var(--accent); }
.badge.status-bearbeitung { background: #fdf3e2; color: var(--warning); }
.badge.status-warten { background: #efeef5; color: #7762a0; }
.badge.status-geloest { background: #e8f4ec; color: var(--success); }
.badge.status-geschlossen { background: #eef0f3; color: var(--text-muted); }
.badge.intern { background: #fdf3e2; color: var(--warning); }

/* Ticket list */
.ticket-list {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.list-header {
  display: grid;
  grid-template-columns: 110px 1fr 130px 130px 160px 160px;
  gap: 16px;
  padding: 14px 20px;
  background: #fafbfd;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ticket-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px 130px 160px 160px;
  gap: 16px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: #fafbfd; }
.ticket-row.active { background: #eef2ff; }

/* Detailansicht der Ticket-Uebersicht (Abschnitt 23): schmale Listenspalte
   links, eingebettetes Ticket (Turbo Frame) rechts - eigener Klassenname,
   um Verwechslung mit .ticket-layout (Karte + Kommentar-Sidebar auf der
   Einzelticket-Seite) zu vermeiden, siehe
   notes/umsetzungsplan-ticket-detailansicht.md Abschnitt 3.5. */
.ticket-split-view { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
/* Abschnitt 55.3 (siehe notes/anforderungen-ticket-erweiterungen.md): die
   Liste soll unabhaengig von der restlichen Seite scrollen koennen, statt
   die ganze Seite (inkl. Status-Tabs/Suchformular) in die Laenge zu
   ziehen; der rechte Detailbereich bleibt stattdessen ueber "sticky" im
   Blick, statt selbst zu scrollen. */
.ticket-split-view-list { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
/* Nutzer-Fund (09.09.2026): "position: sticky" allein reicht nicht - ohne
   eine eigene Hoehenbegrenzung wandert die Karte trotzdem mit, sobald ihr
   (oft langer) Inhalt die Bildschirmhoehe uebersteigt und ihr unteres Ende
   den sichtbaren Bereich erreicht. Jetzt zusaetzlich auf die verfuegbare
   Hoehe begrenzt, ueberstehender Inhalt wird abgeschnitten (bewusst kein
   eigener Scrollbalken - der "Ticket oeffnen"-Button fuehrt zur
   vollstaendigen, normal scrollbaren Seite). */
.ticket-split-view > .card { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: hidden; }
/* .compact erzwingt dieselbe einspaltige Zeilen-Darstellung wie der
   900px-Breakpoint unten (siehe dort) - hier unabhaengig von der
   tatsaechlichen Fensterbreite, weil die schmale Listenspalte im
   Split-View selbst bei breitem Bildschirm zu wenig Platz fuer die
   normalen 5 Spalten bietet. */
.ticket-list.compact .list-header { display: none; }
.ticket-list.compact .ticket-row { grid-template-columns: 1fr; gap: 4px; }
.ticket-id {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.ticket-title { font-weight: 500; color: var(--text); }
.ticket-meta { font-size: 12px; color: var(--text-muted); }
.bearbeiter { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* Status-Tabs der Ticket-Liste (Abschnitt 8) - je ein Link mit Trefferzahl,
   "Alle" plus ein Tab je Workflow-Status; aktiver Tab hervorgehoben. */
.status-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.status-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.status-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Such-/Filterleiste ueber der Ticket-Liste (Abschnitt 8) sowie der
   Security-Log-Liste (Abschnitt 3.4) - Text-/Datumsfelder bekommen
   dieselbe Box-Optik (Border/Radius/Padding/Hintergrund) wie "select"
   oben, damit alle Steuerelemente einer Toolbar-Zeile einheitlich und
   gleich hoch wirken (Nutzer-Fund 05.09.2026: die Datumsfelder der
   Security-Log wichen bis dahin sichtbar vom Rest der UI ab). */
.list-toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.list-toolbar input[type="search"],
.list-toolbar input[type="date"] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.list-toolbar input[type="search"]:focus,
.list-toolbar input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.list-toolbar input[type="search"] { min-width: 240px; }
.list-toolbar input[type="date"] { min-width: 150px; }
.list-toolbar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }

/* Pagination unter der Ticket-Liste */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px; font-size: 13px; color: var(--text-muted); }
.pagination a { color: var(--accent); text-decoration: none; }
.pagination .disabled { color: var(--text-muted); opacity: 0.5; }

/* Detailseite */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
  margin-bottom: 22px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.field .value { font-size: 14px; color: var(--text); font-weight: 500; }

/* Textbaustein-Verwaltung (Abschnitt 10) */
.translation-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.translation-row:last-of-type { border-bottom: none; }

.description-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.description-block h4,
.comments h4,
.activity h4,
.attachments-section h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.description-header { display: flex; align-items: center; justify-content: space-between; }
.description-header h4 { margin-bottom: 0; }
.description-block p { margin: 0; color: var(--text); line-height: 1.6; white-space: pre-line; }

/* Abschnitt 54: "Mehr anzeigen" fuer lange Beschreibungen - reiner
   Checkbox-Toggle-Trick (kein JS), analog zur bestehenden Tab-Loesung.
   Die Beschreibung bleibt IMMER sichtbar (Nutzer-Klarstellung
   14.09.2026: kein komplettes Einklappen, das war ein Missverstaendnis
   eines vorherigen Zwischenstands) - nur bei Ueberlaenge wird gekuerzt.
   Bewusst OHNE Farbverlauf-Overlay (frueherer Versuch verworfen): "max-
   height" begrenzt nur die Obergrenze, eine kuerzere Beschreibung ist
   trotzdem nur so hoch wie ihr eigener Inhalt - ein Verlauf mit
   "position: absolute; bottom: 0" haengt sich dadurch IMMER ans untere
   Ende des tatsaechlichen (ggf. kurzen) Inhalts und sah bei normalen,
   kurzen Beschreibungen faelschlich abgeschnitten aus. Ein einfacher,
   glatter Rand ist deshalb ehrlicher als ein Verlauf, der auch ohne
   echte Kuerzung erscheint. */
.description-expand-toggle { position: absolute; opacity: 0; pointer-events: none; }
.description-content { max-height: 200px; overflow: hidden; }
.description-expand-toggle:checked ~ .description-content { max-height: none; }
.description-expand-label {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.description-expand-label .show-less { display: none; }
.description-expand-toggle:checked ~ .description-expand-label .show-more { display: none; }
.description-expand-toggle:checked ~ .description-expand-label .show-less { display: inline; }
/* Waehrend des Bearbeitens (rich_text_controller.js blendet dafuer
   "editArea" ein) zeigt die gekuerzte Lesedarstellung ohnehin nichts mehr
   an - der Umschalter haette dann nichts mehr zum Auf-/Zuklappen und wird
   deshalb ausgeblendet. Live beim Umbau entdeckt (Abschnitt 54). */
[data-rich-text-target="editArea"]:not([hidden]) ~ .description-expand-label { display: none; }

.attachments-section { margin-bottom: 22px; }

.activity { margin-bottom: 22px; }
.activity-entry { font-size: 13px; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid var(--border); }
.activity-entry:last-child { border-bottom: none; }

/* Ticket-Anhaenge (Punkt 34) */
.attachment-list { list-style: none; margin: 0; padding: 0; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.attachment-item:last-child { border-bottom: none; }
.attachment-thumbnail { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.attachment-meta { color: var(--text-muted); margin-left: auto; }

/* Arbeitsnachweise (Abschnitt 40) - eigenes Layout statt .attachment-item,
   da jeder Eintrag mehrzeilig ist (Zeitraum, Taetigkeit, Meta, Aktionen)
   statt der einzeiligen Anhang-Liste. */
.work-log-list { list-style: none; margin: 0; padding: 0; }
.work-log-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.work-log-item:last-child { border-bottom: none; }
.work-log-item p { margin: 4px 0; }

/* Ticket-Detailseite (Abschnitt 54, siehe
   notes/umsetzungsplan-ticket-detailseite-layout.md): Hauptbereich (breit)
   links zeigt Beschreibung/Anhaenge/Konversation, Details-Sidebar (schmal)
   rechts - faellt auf kleinen Bildschirmen einspaltig zurueck (siehe
   @media-Block unten). Die Grid-Definition selbst ist seit Abschnitt 22
   unveraendert, nur der Inhalt der beiden Spalten wurde getauscht. */
.ticket-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
/* Abschnitt 54: die Sidebar "laeuft mit" statt unabhaengig zu scrollen -
   bewusst OHNE max-height/overflow (anders als z. B. .ticket-split-view
   > .card), da die Details-Karte kurz genug ist, um von selbst am Ende
   ihres Grid-Elements zu stoppen. Gleicher top-Wert wie bei der
   bestehenden Listen-/Detailansicht (Abschnitt 26) fuer visuelle
   Konsistenz. Auf schmalen Bildschirmen deaktiviert (siehe @media unten). */
.ticket-sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; position: sticky; top: 20px; }
/* Grid-Spalten haben ohne dies ein implizites min-width:auto (= Breite des
   groessten Inhalts) - ein per Zwischenablage eingebettetes, sehr breites
   Bild in der Beschreibung wuerde die "1fr"-Spalte (und damit die ganze
   Seite) trotz "max-width: 100%" auf dem <img> selbst aufweiten. Live vom
   Nutzer entdeckt (07.09.2026). */
.ticket-layout > .card:first-child { min-width: 0; }

/* Ticket-Detailseite: gemeinsamer Tab-Bereich (Abschnitt 54) fuer
   Kommentare/Interne Notizen (Abschnitt 39)/Verlauf (Abschnitt 22)/
   Arbeitsnachweise (Abschnitt 40/41) - reine CSS-Loesung ueber
   radio-Inputs, kein JS noetig. Vorher zwei getrennte Reiter-Gruppen
   (Details/Verlauf links, Kommentare/Notizen rechts) plus eine
   eigenstaendige Arbeitsnachweise-Karte ohne Tab - "Details" ist seit
   Abschnitt 54 kein Tab mehr (immer sichtbare Sidebar-Felder), die
   uebrigen drei plus Arbeitsnachweise bilden jetzt eine einzige,
   gemeinsame Gruppe (radio-"name" "ticket-main-tabs", siehe Template). */
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tab-nav label {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-panel { display: none; }
#tab-sidebar-comments:checked ~ .tab-nav label[for="tab-sidebar-comments"],
#tab-sidebar-internal:checked ~ .tab-nav label[for="tab-sidebar-internal"],
#tab-verlauf:checked ~ .tab-nav label[for="tab-verlauf"],
#tab-worklogs:checked ~ .tab-nav label[for="tab-worklogs"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#tab-sidebar-comments:checked ~ #panel-sidebar-comments,
#tab-sidebar-internal:checked ~ #panel-sidebar-internal,
#tab-verlauf:checked ~ #panel-verlauf,
#tab-worklogs:checked ~ #panel-worklogs {
  display: block;
}

.comments { margin-bottom: 22px; }
.comment {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.comment.internal { border-color: var(--warning); background: #fffaf0; }
.comment-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }

.actions {
  display: flex;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

table.plain { width: 100%; border-collapse: collapse; }
table.plain th {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
table.plain td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }

/* Login (kein Sidebar-Layout) */
.auth-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}
.auth-card .brand-logo { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto 28px auto; color: var(--primary); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .list-header { display: none; }
  .ticket-row { grid-template-columns: 1fr; gap: 4px; }
  .content { padding: 20px; }
  .ticket-layout { grid-template-columns: 1fr; }
  /* Abschnitt 54: die sticky Details-Sidebar wuerde auf einer einspaltigen,
     gestapelten Seite nur unschoen mitten im langen Hauptbereich haengen
     bleiben - unter dem Breakpoint stattdessen normaler Fluss. */
  .ticket-sidebar { position: static; }
  /* Abschnitt 23, Entscheidung 3 (siehe
     notes/umsetzungsplan-ticket-detailansicht.md): die Detailansicht wird
     bewusst NICHT auf ein gestapeltes Liste-ueber-Detail-Layout
     umgeschaltet (explizit abgelehnte Option) - stattdessen bleibt unter
     dem Breakpoint ausschliesslich die normale Listenansicht sichtbar,
     der Umschalt-Button selbst wird ausgeblendet. Rein CSS-basiert (kein
     Server-Viewport-Wissen noetig), gleiches Vorgehen wie beim bereits
     bestehenden .ticket-layout oben. */
  .view-toggle { display: none; }
  .ticket-split-view { grid-template-columns: 1fr; }
  .ticket-split-view .card { display: none; }
  /* die verbleibende einspaltige Liste soll sich wie die normale
     Listenansicht verhalten - kein kuenstlich begrenzter, eigenstaendig
     scrollender Bereich auf schmalen Bildschirmen (siehe Abschnitt 55.3). */
  .ticket-split-view-list { position: static; max-height: none; overflow-y: visible; }
  .email-template-locales { grid-template-columns: 1fr; }
}

/* Abschnitt 63 (siehe notes/umsetzungsplan-zeiten-uebersicht.md
   Abschnitt 2.5): Vorschlagsliste des Ticket-Autocomplete in der
   Zeiten-Sammel-Bearbeitung. */
.ticket-picker { position: relative; }
.ticket-picker-results {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 200px;
  overflow-y: auto;
}
.ticket-picker-result { padding: 6px 10px; font-size: 13px; cursor: pointer; }
.ticket-picker-result:hover { background: var(--bg); }
.work-log-grid-table td { vertical-align: top; }