/* Modulspezifische Styles für das Ticket-Modul. */

/* ===== Metadaten-Raster (analog dok-meta-raster) ===== */

.tk-meta-raster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--abst-4) var(--abst-8);
}

.tk-meta-eintrag {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tk-meta-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--f-text-schwach, #6c7086);
}

/* ===== Kommentar-Thread ===== */

.tk-kommentare {
	display: flex;
	flex-direction: column;
	gap: var(--abst-3);
}

.tk-kommentar {
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	padding: var(--abst-3) 0.875rem;
	background: var(--f-hintergrund, #1e1e2e);
}

.tk-kommentar--intern {
	border-color: color-mix(in srgb, var(--f-warnung, #f9e2af) 50%, transparent);
	background: color-mix(in srgb, var(--f-warnung, #f9e2af) 5%, transparent);
}

.tk-kommentar-kopf {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	margin-bottom: var(--abst-2);
	flex-wrap: wrap;
}

.tk-kommentar-autor {
	font-weight: 600;
	font-size: 0.9rem;
}

.tk-kommentar-inhalt {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--f-text, #cdd6f4);
	white-space: pre-wrap;
	word-break: break-word;
}

/* ===== Genehmigungskette ===== */

.tk-genehmigungskette {
	display: flex;
	flex-direction: column;
	gap: var(--abst-4);
}

.tk-genehmigungsschritt {
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	padding: var(--abst-3) 0.875rem;
}

.tk-genehmigungsschritt .abschnitt-titel {
	margin-bottom: var(--abst-2);
}

/* ===== SLA-Ampel ===== */

.sla-ampel {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	vertical-align: middle;
	border: 1px solid rgba(0,0,0,0.2);
}

.tk-sla-gruen { background-color: var(--f-sla-gruen, #40a02b); }
.tk-sla-gelb  { background-color: var(--f-sla-gelb,  #df8e1d); }
.tk-sla-rot   { background-color: var(--f-sla-rot,   #d20f39); }

.td-sla { text-align: center; }

.tk-sla-detail {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: var(--abst-2) var(--abst-3);
	border-radius: 0.375rem;
	background: var(--f-card, var(--f-seitenleiste, #181825));
	border: 1px solid var(--f-border, #45475a);
}

.tk-sla-detail.tk-sla-rot   { border-color: var(--f-sla-rot,   #d20f39); }
.tk-sla-detail.tk-sla-gelb  { border-color: var(--f-sla-gelb,  #df8e1d); }
.tk-sla-detail.tk-sla-gruen { border-color: var(--f-sla-gruen, #40a02b); }

/* ===== Workflow-Flowchart-Editor ===== */

.tk-wf-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--abst-3);
	flex-wrap: wrap;
	margin-bottom: var(--abst-3);
}

.tk-wf-palette {
	display: flex;
	flex-wrap: wrap;
	gap: var(--abst-1);
}

.tk-wf-toolbar-rechts {
	display: flex;
	align-items: center;
	gap: var(--abst-3);
}

.tk-wf-status {
	font-size: 0.85rem;
	color: var(--f-text-schwach, #6c7086);
}

.tk-wf-status--dirty {
	color: var(--f-warnung, #f9e2af);
}

.tk-wf-meldungen {
	border: 1px solid var(--f-fehler, #f38ba8);
	border-radius: 0.375rem;
	padding: var(--abst-2) var(--abst-3);
	margin-bottom: var(--abst-3);
	color: var(--f-fehler, #f38ba8);
	font-size: 0.875rem;
}

.tk-wf-meldungen ul {
	margin: 0;
	padding-left: 1.25rem;
}

.tk-wf-flaeche {
	display: flex;
	gap: var(--abst-3);
	align-items: stretch;
}

.tk-wf-canvas {
	flex: 1 1 auto;
	min-width: 0;
	height: 560px;
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	background: var(--f-hintergrund, #1e1e2e);
	/* Punktraster zur Orientierung beim Platzieren */
	background-image: radial-gradient(color-mix(in srgb, var(--f-border, #45475a) 55%, transparent) 1px, transparent 1px);
	background-size: 24px 24px;
	touch-action: none;
	cursor: grab;
	color: var(--f-text-schwach, #6c7086); /* Pfeilspitzen (currentColor im Marker) */
}

.tk-wf-canvas:active {
	cursor: grabbing;
}

.tk-wf-panel {
	flex: 0 0 21rem;
	max-height: 560px;
	overflow-y: auto;
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	padding: var(--abst-3);
	background: var(--f-card, var(--f-seitenleiste, #181825));
}

@media (max-width: 60rem) {
	.tk-wf-flaeche {
		flex-direction: column;
	}
	.tk-wf-panel {
		flex-basis: auto;
		max-height: none;
	}
}

.tk-wf-panel-kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--abst-2);
	margin-bottom: var(--abst-3);
}

/* SVG-Knoten */

.tk-wf-knoten rect {
	fill: var(--f-card, var(--f-seitenleiste, #181825));
	stroke: var(--f-border, #45475a);
	stroke-width: 1.5;
	cursor: move;
}

.tk-wf-knoten--rand rect {
	stroke: var(--f-erfolg, #a6e3a1);
}

.tk-wf-knoten--fluss rect {
	stroke: var(--f-akzent, #89b4fa);
}

.tk-wf-knoten--gewaehlt rect {
	stroke: var(--f-aktiv, #89b4fa);
	stroke-width: 3;
}

.tk-wf-knoten--fehler rect {
	stroke: var(--f-fehler, #f38ba8);
	stroke-width: 3;
}

.tk-wf-knoten-typ {
	fill: var(--f-text-schwach, #6c7086);
	font-size: 11px;
	text-anchor: middle;
	pointer-events: none;
}

.tk-wf-knoten-name {
	fill: var(--f-text, #cdd6f4);
	font-size: 13px;
	text-anchor: middle;
	pointer-events: none;
}

.tk-wf-port {
	fill: var(--f-hintergrund, #1e1e2e);
	stroke: var(--f-aktiv, #89b4fa);
	stroke-width: 2;
	cursor: crosshair;
}

.tk-wf-port:hover {
	fill: var(--f-aktiv, #89b4fa);
}

.tk-wf-port-label {
	fill: var(--f-text-schwach, #6c7086);
	font-size: 10px;
	text-anchor: middle;
	pointer-events: none;
}

/* SVG-Kanten */

.tk-wf-kante-hit {
	fill: none;
	stroke: transparent;
	stroke-width: 14;
	cursor: pointer;
}

.tk-wf-kante-linie {
	fill: none;
	stroke: var(--f-text-schwach, #6c7086);
	stroke-width: 2;
	pointer-events: none;
}

.tk-wf-kante-linie--ja {
	stroke: var(--f-erfolg, #a6e3a1);
}

.tk-wf-kante-linie--nein {
	stroke: var(--f-fehler, #f38ba8);
}

.tk-wf-kante-linie--timeout {
	stroke: var(--f-warnung, #f9e2af);
}

.tk-wf-kante--gewaehlt .tk-wf-kante-linie {
	stroke: var(--f-aktiv, #89b4fa);
	stroke-width: 3;
}

.tk-wf-kante-label {
	fill: var(--f-text-schwach, #6c7086);
	font-size: 11px;
	pointer-events: none;
}

.tk-wf-gummiband {
	fill: none;
	stroke: var(--f-aktiv, #89b4fa);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	pointer-events: none;
}

/* Bedingungs-Editor im Panel */

.tk-wf-bedingung {
	display: flex;
	flex-direction: column;
	gap: var(--abst-2);
}

.tk-wf-regel {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--abst-1);
	align-items: center;
	border: 1px solid var(--f-border, #45475a);
	border-radius: 0.375rem;
	padding: var(--abst-2);
}

.tk-wf-regel select,
.tk-wf-regel input {
	grid-column: 1 / -1;
}

.tk-wf-regel [data-tk-regel-entfernen] {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

.tk-wf-regel [data-tk-regel-feld] {
	grid-column: 1;
	grid-row: 1;
}

.tk-wf-platzhalter {
	margin-top: var(--abst-3);
	font-size: 0.85rem;
}

.tk-wf-platzhalter summary {
	cursor: pointer;
	color: var(--f-text-schwach, #6c7086);
}

.tk-wf-optional {
	margin-bottom: var(--abst-3);
	font-size: 0.9rem;
}

.tk-wf-optional summary {
	cursor: pointer;
	color: var(--f-text-schwach, #6c7086);
	margin-bottom: var(--abst-2);
}

/* .formular-gruppe setzt display:flex und überschreibt damit den
   Browser-Default `[hidden] { display: none }` — die Feld-Toggles im
   Eigenschaften-Panel brauchen die explizite Regel (Muster wie user.css). */
.tk-wf-panel [hidden] {
	display: none;
}

/* ===== Tabs in der Ticket-Detailansicht ===== */

/* .reiter ist im Core für <a> gestylt — Buttons brauchen den Reset. */
.tk-tabs .reiter {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: var(--abst-1);
}

.tk-tabs .reiter--aktiv {
	border-bottom-color: var(--f-aktiv, #89b4fa);
}

/* Aufgaben: Mehrfach-Personenauswahl */
.tk-personen-auswahl {
	display: flex;
	flex-direction: column;
	gap: var(--abst-1);
	max-height: 12rem;
	overflow-y: auto;
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--radius, 6px);
	padding: var(--abst-2) var(--abst-3);
}

.tk-person-option {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	cursor: pointer;
}

/* Aufgaben: Checkliste */
.tk-inline-form { display: inline; margin: 0; }

.tk-check-zaehler { color: var(--f-text-schwach, #6c7086); font-weight: normal; }

.tk-check-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--abst-2);
	margin-bottom: var(--abst-3);
	color: var(--f-text-schwach, #6c7086);
	cursor: pointer;
}

.tk-checkliste { list-style: none; margin: 0 0 var(--abst-3); padding: 0; }

.tk-checkpunkt {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	padding: var(--abst-2) 0;
	border-bottom: 1px solid var(--f-border, #45475a);
}

.tk-checkpunkt--erledigt .tk-check-titel {
	text-decoration: line-through;
	color: var(--f-text-schwach, #6c7086);
}

.tk-checkliste--ohne-erledigt .tk-checkpunkt--erledigt { display: none; }

.tk-check-box {
	background: none;
	border: none;
	padding: 0;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--f-text, #cdd6f4);
	cursor: pointer;
}

.tk-check-titel { flex: 1; }

.tk-icon-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--f-text-schwach, #6c7086);
	cursor: pointer;
	display: inline-flex;
}

.tk-icon-btn:hover { color: var(--f-gefahr, #d20f39); }

.tk-check-add,
.tk-abh-add {
	display: flex;
	gap: var(--abst-2);
	align-items: center;
	margin-top: var(--abst-3);
}

.tk-check-add input[type="text"],
.tk-abh-add select { flex: 1; }

/* Aufgaben: Abhängigkeiten */
.tk-abh-liste { list-style: none; margin: 0 0 var(--abst-3); padding: 0; }

.tk-abh-eintrag {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	padding: var(--abst-2) 0;
	border-bottom: 1px solid var(--f-border, #45475a);
}

.tk-abh-titel { flex: 1; }

.tk-abh-hinweis {
	color: var(--f-warnung, #df8e1d);
	font-size: 0.85rem;
}

/* Aufgaben: Anhänge & Kommentare */
.tk-anhang-add {
	display: flex;
	gap: var(--abst-2);
	align-items: center;
	flex-wrap: wrap;
	margin-top: var(--abst-3);
}

.tk-kommentar-datum { color: var(--f-text-schwach, #6c7086); font-size: 0.85rem; }

.tk-kommentar-del { margin-left: auto; }

.tk-kommentar-add { margin-top: var(--abst-3); }

/* Aufgaben: Board / Kanban */
.tk-board-meine { align-self: end; }

.tk-board-achsen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--abst-2);
	margin-bottom: var(--abst-3);
}

.tk-board-achsen-label {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.9rem;
}

.tk-board {
	display: flex;
	gap: var(--abst-3);
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: var(--abst-2);
}

.tk-board-spalte {
	flex: 1 0 16rem;
	min-width: 16rem;
	max-width: 22rem;
	background: var(--f-card, var(--f-seitenleiste, #181825));
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--radius, 6px);
	display: flex;
	flex-direction: column;
}

.tk-board-spalte-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--abst-2);
	padding: var(--abst-3);
	font-weight: 600;
	border-bottom: 1px solid var(--f-border, #45475a);
}

.tk-board-zaehler {
	color: var(--f-text-schwach, #6c7086);
	font-weight: normal;
	font-size: 0.85rem;
}

.tk-board-karten {
	display: flex;
	flex-direction: column;
	gap: var(--abst-2);
	padding: var(--abst-3);
	min-height: 4rem;
	flex: 1;
}

.tk-board-karte {
	background: var(--f-hintergrund, #1e1e2e);
	border: 1px solid var(--f-border, #45475a);
	border-radius: var(--radius, 6px);
	padding: var(--abst-3);
	display: flex;
	flex-direction: column;
	gap: var(--abst-2);
}

.tk-board[data-darf-bearbeiten="1"] .tk-board-karte { cursor: grab; }

.tk-board-karte--zieht { opacity: 0.45; }

.tk-board-karte-titel { font-weight: 600; }

.tk-board-karte-meta {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	flex-wrap: wrap;
}

.tk-board-karte-faellig,
.tk-board-karte-personen,
.tk-board-karte-ticket {
	color: var(--f-text-schwach, #6c7086);
	font-size: 0.85rem;
}

/* Aufgaben: Kalender (Monatsraster) */
.tk-kal-kopf {
	display: flex;
	align-items: center;
	gap: var(--abst-2);
	margin-bottom: var(--abst-3);
}

.tk-kal-kopf h2 { margin: 0; flex: 1 1 auto; }

.tk-kal-wochen {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--f-text-schwach, #6c7086) 25%, transparent);
	border-radius: var(--radius, 6px);
	overflow: hidden;
}

.tk-kal-wochentag {
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 8%, transparent);
	padding: var(--abst-1) var(--abst-2);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--f-text-schwach, #6c7086);
	text-align: center;
}

.tk-kal-tag {
	background: var(--f-seitenleiste, #181825);
	padding: var(--abst-1) var(--abst-2);
	min-height: 6rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	overflow: hidden;
}

.tk-kal-tag--fremd {
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 4%, transparent);
	opacity: 0.7;
}

.tk-kal-tag--wochenende {
	background: color-mix(in srgb, var(--f-text-schwach, #6c7086) 6%, transparent);
}

.tk-kal-tag--heute .tk-kal-tag-nr {
	background: var(--f-aktiv, #89b4fa);
	color: var(--f-aktiv-text, #1e1e2e);
	font-weight: 700;
}

.tk-kal-tag-nr {
	align-self: flex-start;
	font-size: 0.78rem;
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	border-radius: 50%;
}

.tk-kal-eintrag {
	display: block;
	font-size: 0.78rem;
	padding: 0.15rem 0.3rem;
	border-radius: 3px;
	background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 15%, transparent);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: 3px solid var(--f-aktiv, #89b4fa);
}

.tk-kal-eintrag:hover { background: color-mix(in srgb, var(--f-aktiv, #89b4fa) 28%, transparent); }

.tk-kal-eintrag--prio-hoch { border-left-color: var(--f-gefahr, #d20f39); }
.tk-kal-eintrag--prio-mittel { border-left-color: var(--f-aktiv, #89b4fa); }
.tk-kal-eintrag--prio-niedrig { border-left-color: var(--f-text-schwach, #6c7086); }

.tk-kal-eintrag--erledigt { opacity: 0.55; text-decoration: line-through; }

.tk-kal-mehr {
	font-size: 0.7rem;
	color: var(--f-text-schwach, #6c7086);
	padding-left: 0.4rem;
}