/* ===== Ticketing — NUR Anordnung (eigene .tk-*-Klassen, Kern-Tokens). Das AUSSEHEN (Farben, Schrift,
   Rahmen, Radien, Schatten) kommt aus den Kern-Bausteinen: Design::modeBar, band, richText, fileTile,
   comment, aside, rubric, pickRow, feedItem, listRow-Varianten, btn/iconBtn/segmented/chip-Töne. ===== */

/* Oben-Innenluft der Hauptspalte (seitlich/unten liefert .wn-main-col; wie crm-main). */
.tk-main-col { padding-top: var(--sp-7); }

/* Listen-Zelle: Zugewiesene als Avatar-Reihe */
.tk-assignees { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* CRM-Kontakt-Sektion: kompakte Ticket-Liste (Zeilen = Kern-Baustein listRow) */
.tk-contact-tickets { display: flex; flex-direction: column; }
.tk-contact-row { cursor: pointer; }
.tk-contact-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board-Ansicht: Projektwahl über dem Board, Board füllt die Fläche. */
.tk-board-bar { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tk-board-mount { min-height: var(--sz-220); }
.tk-card-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   TICKET-DETAIL (breite Sidebar) — Aufbau 1:1 ERP ticketing-detail.css, nur die Anordnung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Steuerleiste im Kopf: Kategorie · Eskalation · Sichtbarkeit · Wichtig · Verrechenbar · Zeit · Termin */
.tk-hd { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.tk-hd .cc-menu-wrap { display: inline-flex; }
.tk-hd .mpp-wrap { width: auto; }
/* Termin: sichtbarer Button, das Datumsfeld liegt unsichtbar dahinter und öffnet den Browser-Picker. */
.tk-hd-duewrap { position: relative; display: inline-flex; }
.tk-hd .tk-hd-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

/* hidden-Attribut gewinnt IMMER gegen die display-Regeln der Bausteine (Editor, Antwort-Hinweis, Zeit-Panel). */
.tk-detail [hidden], .tk-hd [hidden] { display: none !important; }

/* ── Grundgerüst: Modus-Balken links, dann zwei Spalten. Randlos in der Sidebar (flush). ── */
.tk-detail { position: relative; display: flex; min-height: calc(100vh - var(--sz-72)); margin-bottom: calc(-1 * var(--sp-8)); }
/* Die Arbeitsfläche klebt DIREKT am Tab „Allgemein" (Florian 2026-09-12: kein weisser Balken dazwischen) —
   der Tab-Körper hat über ihr keinen Innenabstand. */
.accordion-body:has(> .tk-detail) { padding-top: 0; }
/* Ohne Innenabstand oben steht der Modus-Balken ab der Innenkante des Scrollbereichs → top 0. */
.tk-mode-bar { flex: 0 0 var(--sz-16); position: sticky; top: 0; align-self: flex-start; height: 100vh; max-height: 100%; }

.tk-layout { flex: 1 1 auto; display: flex; min-width: 0; }
.tk-main { flex: 1 1 auto; min-width: 0; padding: var(--sp-7) var(--sp-8) var(--sp-9) var(--sp-8); }
/* Rechte Spalte wie ERP: feste Breite, bleibt beim Scrollen stehen. */
.tk-side { flex: 0 0 var(--sz-280); width: var(--sz-280); min-width: 0; }
.tk-side-inner { position: sticky; top: 0; padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.tk-sec-add, .tk-sec-list { min-width: 0; }

/* ── Aufgabenteil: Projekt/Ersteller → Titel → Beschreibung → Anhänge (Kopfband bricht bis an die Ränder aus) ── */
.tk-task { margin: calc(-1 * var(--sp-7)) calc(-1 * var(--sp-8)) 0; padding: var(--sp-7) var(--sp-8) var(--sp-4); }
.tk-info { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.tk-info-menu { margin-left: auto; }
.tk-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tk-title { margin: 0; }
.tk-edit-area { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.tk-edit-area .mage-field { width: 100%; margin-bottom: 0; }

/* Anhänge: Kachel-Raster (Kacheln = Kern-Baustein fileTile) */
.tk-atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tk-att-all { margin-top: var(--sp-3); }
.tk-lb-img { max-width: 100%; height: auto; display: block; }

/* ── Verfasser + Umschalter ── */
.tk-composer { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
.tk-composer-foot { display: flex; align-items: center; gap: var(--sp-4); }
.tk-composer-hint { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Verfasser als Antwort unter einem Beitrag (die Mulde selbst setzt das JS als Kern-Zustand cc-well). */
.tk-reply-slot .tk-composer { margin: var(--sp-3) 0 var(--sp-2); }

.tk-vis-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3); }

/* ── Kommentare (Beiträge = Kern-Baustein comment) ── */
.tk-comments { display: flex; flex-direction: column; }
.tk-c-editacts { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
/* In der öffentlichen Sicht sind interne Beiträge ausgeblendet (der Kunde sieht sie nie) und die
   Öffentlich-Plakette entfällt (dort ist ohnehin alles öffentlich). */
.tk-mode-public .tk-c-internal, .tk-mode-public .tk-c-pub { display: none; }
.tk-activity { display: flex; flex-direction: column; }

.tk-time-hours { max-width: var(--sz-100); }
.tk-time-date { max-width: var(--sz-160); }
.tk-time-act { max-width: var(--sz-160); }

/* ── Rechte Spalte: Rubriken (Kern), darin Listen + Hinzufügen ── */
.tk-sec-list { display: flex; flex-direction: column; }
.tk-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sec-add .mpp-wrap { width: 100%; min-width: 0; }
.tk-sec-add .mpp-trigger { width: 100%; min-width: 0; box-sizing: border-box; }
.tk-status-list { display: flex; flex-direction: column; }
.tk-side-foot { margin-top: var(--sp-4); }
.tk-set-list { margin-bottom: var(--sp-6); }

/* Schmale Sidebar (kleine Bildschirme): Spalten untereinander, Modus-Balken bleibt. */
@media (max-width: 900px) {
  .tk-layout { flex-direction: column; }
  .tk-side { flex: none; }
  .tk-side-inner { position: static; }
}

/* ── Layer 2 (Zeit/Benachrichtigungen = Datenblatt; Verschieben/Zugriffsprotokoll = Formular/Blöcke) ── */
.tk-l2-move, .tk-l2-access { display: flex; flex-direction: column; gap: var(--sp-5); }
.tk-l2-move .mage-field { margin-bottom: 0; }

/* ── Liste zweizeilig: Titel darf bis zu drei Zeilen lang sein (er ist das, was man liest). ── */
.tk-wrap .mage-table td > .tk-ent > .cc-ent-info > .cc-ent-title { -webkit-line-clamp: 3; }
.tk-wrap .mage-table td .tk-ent .cc-ent-meta { flex-wrap: wrap; }

/* ── Personen (Zeilen = Kern-listRow, Variante clickable) ── */
.tk-people-project { margin-bottom: var(--sp-5); }
.tk-people-project-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tk-people-counts { white-space: nowrap; }

/* ── Aktivität (Spezial-Controls = Kern-row, Inhalt = Kern-Tabelle) ──
   Kein eigener Innenabstand: .tk-main polstert schon, der Abstand Zeile → Tabelle kommt aus dem
   layout-Kern (.cc-row + .dataTables_wrapper). Nur die Blätter-Gruppe rückt enger zusammen, und die
   Bezeichnung hat eine Mindestbreite, damit ‹ › beim Blättern nicht springen. */
.tk-act-nav { gap: var(--sp-2); }
.tk-act-label { min-width: var(--sz-120); text-align: center; }
.tk-act-excerpt { display: block; margin-top: var(--sp-1); }

/* ── Benachrichtigungen & Erinnerungen (Layer 2) ── */
.tk-rem-list { display: flex; flex-direction: column; margin-bottom: var(--sp-6); }
.tk-l2-notify .cc-radio-group { display: flex; flex-direction: column; gap: var(--sp-2); }