/* ===== Ticketing — nur eigene .tk-*-Klassen, ausschliesslich Kern-Tokens ===== */

/* 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, Tokens statt Werte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar-Kopf bleibt NEUTRAL (kein Blau/Orange als Fläche — zu aufdringlich); den Modus zeigt
   allein der seitliche Balken (.tk-mode-bar). Die Ticketnummer im Kopf läuft in Mono. ── */
.mage-sidebar-panel.tk-mode-public   .mage-sidebar-header h4,
.mage-sidebar-panel.tk-mode-internal .mage-sidebar-header h4 { font-family: var(--mono); }
/* Eskalationsstufe: Auswahl 0–9 als Menü (Kern-Baustein), die aktuelle Stufe markiert */
.tk-hd .cc-menu-wrap { display: inline-flex; }
.tk-hd .cc-menu-item[aria-current="true"] { font-weight: var(--fw-bold); color: var(--o); }

/* 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 .mpp-wrap { width: auto; }
.tk-hd .ac-btn-action { background: var(--surface); border: 1px solid var(--border); width: var(--sz-36); height: var(--sz-36); }
.tk-hd .ac-btn-action:hover { background: var(--grey-100); }
/* Eskalationsstufe: 0 neutral · 1–2 gelb · 3–5 rot · 6–9 violett (ERP-Skala auf die Kern-Töne gelegt) */
.tk-push-l1, .tk-push-l2 { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bg); }
.tk-push-l3, .tk-push-l4, .tk-push-l5 { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-bg); }
.tk-push-l6, .tk-push-l7, .tk-push-l8, .tk-push-l9 { background: var(--accent-2-bg); color: var(--accent-2); border-color: var(--accent-2-bg); }
.tk-hd .tk-push-l1:hover, .tk-hd .tk-push-l2:hover { background: var(--warn-bg); color: var(--warn-fg); }
.tk-hd .tk-push-l3:hover, .tk-hd .tk-push-l4:hover, .tk-hd .tk-push-l5:hover { background: var(--danger-bg); color: var(--danger-fg); }
.tk-hd .tk-push-l6:hover, .tk-hd .tk-push-l7:hover, .tk-hd .tk-push-l8:hover, .tk-hd .tk-push-l9:hover { background: var(--accent-2-bg); color: var(--accent-2); }
/* 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: 100%; margin-bottom: calc(-1 * var(--sp-8)); }
/* top = minus Body-Innenabstand: sticky rechnet ab der Innenkante des Scrollbereichs — sonst klafft oben
   ein 20px-Spalt zwischen Kopfleiste und Balken. */
.tk-mode-bar { flex: 0 0 var(--sz-16); position: sticky; top: calc(-1 * var(--sp-8)); align-self: flex-start; height: 100vh; max-height: 100%;
               display: flex; align-items: center; justify-content: center; transition: background var(--dur); }
.tk-detail { min-height: calc(100vh - var(--sz-72)); }
.tk-mode-bar-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
                    text-transform: uppercase; letter-spacing: var(--tracking); color: var(--surface); white-space: nowrap; }
.tk-mode-internal .tk-mode-bar { background: var(--o); }
.tk-mode-public   .tk-mode-bar { background: var(--info); }

.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: 260px, grauer Grund, Trennlinie, bleibt beim Scrollen stehen. */
.tk-side { flex: 0 0 var(--sz-280); width: var(--sz-280); min-width: 0; background: var(--grey-50); border-left: 1px solid var(--border); }
.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, .tk-sec-add, .tk-sec-list { min-width: 0; }

/* ── Aufgabenteil: Projekt/Ersteller → Titel → Beschreibung → Anhänge (leicht abgesetzt, wie ERP) ── */
.tk-task { background: linear-gradient(to bottom, var(--grey-50) 0%, var(--surface) 100%);
           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; color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.tk-info-project { font-weight: var(--fw-med); color: var(--grey-700); }
.tk-info-sep { width: 1px; height: var(--sz-14); background: var(--border); }
.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; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.3; }
.tk-desc-view { font-size: var(--fs-md); line-height: var(--lh); color: var(--grey-800); }
.tk-desc-view > :first-child { margin-top: 0; }
.tk-desc-view > :last-child { margin-bottom: 0; }
.tk-desc-view img { max-width: 100%; height: auto; }
/* Inline-Bilder (aus dem Editor eingefügte Screenshots) als 72px-Vorschau wie im ERP (.tkd-inline-img);
   Klick öffnet sie gross im Overlay. Kleine Avatare in Systemeinträgen bleiben klein. */
.tk-desc-view img:not(.tkd-system-avatar), .tk-c-body img:not(.tkd-system-avatar) {
  max-width: var(--sz-72); max-height: var(--sz-72); width: auto; height: auto; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: zoom-in; vertical-align: middle;
  margin: var(--sp-1) var(--sp-1) var(--sp-1) 0; transition: border-color var(--dur-fast); }
.tk-desc-view img:not(.tkd-system-avatar):hover, .tk-c-body img:not(.tkd-system-avatar):hover { border-color: var(--o); }
.tk-c-body img.tkd-system-avatar { width: var(--sz-20); height: var(--sz-20); border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: var(--sp-1); }
.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 mit Vorschau (Bild) oder Datei-Kachel (Icon + Endung) */
.tk-atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tk-att { width: var(--sz-100); height: var(--sz-72); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
          background: var(--surface); color: var(--muted); text-decoration: none; transition: box-shadow var(--dur-fast); }
.tk-att:hover { box-shadow: var(--shadow-sm); color: var(--ink); }
.tk-att img { width: 100%; height: 100%; object-fit: cover; }
.tk-att-ext { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.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 { color: var(--muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Verfasser als Antwort unter einem Beitrag: eingerückt, dezent gerahmt */
.tk-reply-slot .tk-composer { margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-50); }

.tk-vis-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3); }
/* Der Umschalter trägt die Modus-Farbe: intern orange (Kern-Default), öffentlich blau. */
.tk-mode-public .tk-vis-toggle .cc-seg-active, .tk-mode-public .tk-vis-toggle .cc-seg-active:hover { background: var(--info); }

/* ── Kommentare: Avatar links, Kopfzeile (Name · relative Zeit · #Nr · Aktionen), Text ── */
.tk-comments { display: flex; flex-direction: column; }
.tk-c { display: flex; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--grey-100); }
.tk-c-left { flex: 0 0 auto; }
.tk-c-right { flex: 1 1 auto; min-width: 0; }
.tk-c-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.tk-c-author { font-weight: var(--fw-bold); color: var(--ink); }
.tk-c-date, .tk-c-num { color: var(--muted); font-size: var(--fs-sm); }
.tk-c-acts { display: inline-flex; align-items: center; gap: var(--sp-1); opacity: 0; transition: opacity var(--dur-fast); }
.tk-c:hover .tk-c-acts, .tk-c:focus-within .tk-c-acts { opacity: 1; }
.tk-c-body { font-size: var(--fs-base); line-height: var(--lh); color: var(--grey-800); }
.tk-c-body > :first-child { margin-top: 0; }
.tk-c-body > :last-child { margin-bottom: 0; }
.tk-c-body img { max-width: 100%; height: auto; }
.tk-c-editacts { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
/* Antworten hängen eingerückt unter ihrem Beitrag (ERP tkd-replies). */
.tk-c-reply { margin-left: var(--sz-52); border-bottom-color: var(--grey-50); }
/* Systemeinträge (Zuweisung, Status, Label): kompakt, kursiv, kleiner Avatar — wie im ERP. */
.tk-c-sys { padding: var(--sp-3) 0; }
.tk-c-sys .tk-c-body { font-style: italic; color: var(--muted); }
/* Öffentliche Beiträge sind in der internen Sicht als solche markiert; in der öffentlichen Sicht
   sind interne Beiträge ausgeblendet (der Kunde sieht sie nie). */
.tk-mode-public .tk-c-internal { display: none; }
.tk-mode-public .tk-c-pub { display: none; }
.tk-c-pub { background: var(--info-bg); color: var(--info-fg); }
/* Verlauf-Akkordeon: volle Breite der Hauptspalte (bricht aus deren Innenabstand aus). */
.tk-more { margin: var(--sp-6) calc(-1 * var(--sp-8)) 0; }

.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: Sektionen (Beschriftung oben, Liste, Hinzufügen darunter) ── */
.tk-sec { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.tk-sec .txt-label { text-transform: uppercase; letter-spacing: var(--tracking); color: var(--muted); font-size: var(--fs-2xs); }
.tk-sec-list { display: flex; flex-direction: column; }
.tk-sec-list .cc-lrow { padding: var(--sp-1) 0; }
.tk-sec-list .cc-lrow + .cc-lrow { border-top: 0; }
.tk-sec-list .cc-lrow-act { opacity: 0; transition: opacity var(--dur-fast); }
.tk-sec-list .cc-lrow:hover .cc-lrow-act, .tk-sec-list .cc-lrow:focus-within .cc-lrow-act { opacity: 1; }
.tk-person-name { font-size: var(--fs-base); color: var(--ink); 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; }
/* Status-Liste: Farbpunkt + Name, aktiver Eintrag hervorgehoben, Klick setzt den Status. */
.tk-status-list { display: flex; flex-direction: column; }
.tk-status-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); border-radius: var(--radius); cursor: pointer; color: var(--grey-700); font-size: var(--fs-base); }
.tk-status-row:hover { background: var(--grey-100); color: var(--ink); }
.tk-status-row .cc-swatch { width: var(--sz-12); height: var(--sz-12); border-radius: 50%; flex: none; }
.tk-status-name { flex: 1 1 auto; }
.tk-status-on { background: var(--ok-bg); color: var(--ink); font-weight: var(--fw-bold); }
.tk-status-on:hover { background: var(--ok-bg); }
.tk-status-check { color: var(--ok); }
.tk-side-foot { margin-top: var(--sp-4); }
.tk-set-list { margin-bottom: var(--sp-6); }

/* ── Verlauf ── */
.tk-activity { display: flex; flex-direction: column; }
.tk-act-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.tk-act-type { font-weight: var(--fw-bold); }
.tk-act-meta, .tk-act-val { color: var(--muted); font-size: var(--fs-sm); }

/* Schmale Sidebar (kleine Bildschirme): Spalten untereinander, Modus-Balken bleibt. */
@media (max-width: 900px) {
  .tk-layout { flex-direction: column; }
  .tk-side { flex: none; border-left: 0; border-top: 1px solid var(--border); }
  .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; }

/* ── Rail: Einstellungen unten ── */
.tk-rail-foot { margin-top: var(--sp-6); border-top: 1px solid var(--border); padding-top: var(--sp-3); }

/* ── Personen ── */
.tk-people-project { margin-bottom: var(--sp-5); }
.tk-people-project-h { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-med); color: var(--grey-700); margin-bottom: var(--sp-2); }
.tk-person-row { cursor: pointer; border-radius: var(--radius); padding-left: var(--sp-2); padding-right: var(--sp-2); }
.tk-person-row:hover { background: var(--grey-100); }
.tk-people-name { font-weight: var(--fw-med); color: var(--ink); }
.tk-people-counts { white-space: nowrap; }

/* ── Aktivität (vereinfachte Liste) ── */
.tk-act { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-7) var(--sp-8); }
.tk-act-bar { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.tk-act-nav { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tk-act-label { min-width: var(--sz-120); text-align: center; font-weight: var(--fw-med); }
.tk-act-list { display: flex; flex-direction: column; }
.tk-act-day { margin: var(--sp-5) 0 var(--sp-2); }
.tk-act-item { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--grey-100); }
.tk-act-time { flex: 0 0 var(--sz-44); color: var(--muted); font-size: var(--fs-sm); padding-top: var(--sp-1); }
.tk-act-main { flex: 1 1 auto; min-width: 0; }
.tk-act-line { color: var(--ink); }
.tk-act-excerpt { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.tk-act-where { flex: 0 0 auto; max-width: var(--sz-240); text-align: right; color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking); padding-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); }