/* ════════════════════════════════════════════════════════════════
   TELINAGE · enhance.css
   Laedt NACH dashboard.css (Dash sortiert Assets alphabetisch:
   dashboard.css -> enhance.css -> navigation.js).
   Enthaelt nur Ergaenzungen und Korrekturen, ueberschreibt nichts
   Strukturelles.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Versionsmarker - im Browser pruefbar, siehe Diagnose-Snippet */
  --tln-build: "2026-08-01-c";
  --tln-ease: cubic-bezier(.22, .61, .36, 1);
  --tln-glow: 0 0 0 3px rgba(59, 130, 246, .16);
}

/* ── 1. TABS ────────────────────────────────────────────────────
   Vorher: zwei harte Kaesten mit sichtbarer Kante dazwischen.
   Jetzt: eine Leiste, gleitender Akzent, klarer aktiver Zustand. */

.tln-workspace-tabs-wrap {
  background: linear-gradient(180deg, #0d1728 0%, #0b1422 100%) !important;
  padding: 0 6px;
}

.tln-workspace-tabs {
  gap: 6px !important;
  padding: 14px 14px 0 !important;
}

.tln-workspace-tab {
  position: relative;
  min-width: 0 !important;
  flex: 1 1 auto;
  border-radius: 11px 11px 0 0 !important;
  border-bottom: 0 !important;
  overflow: hidden;
  transition: color 180ms var(--tln-ease), background 180ms var(--tln-ease) !important;
}

/* gleitender Unterstrich */
.tln-workspace-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: left 260ms var(--tln-ease), right 260ms var(--tln-ease);
}

.tln-workspace-tab:hover::after { left: 30%; right: 30%; }
.tln-workspace-tab-active::after { left: 0; right: 0; }

.tln-workspace-tab:hover {
  background: rgba(59, 130, 246, .07) !important;
  color: #f8fafc !important;
}

.tln-workspace-tab-active {
  background: linear-gradient(180deg, rgba(59, 130, 246, .16), rgba(59, 130, 246, .05)) !important;
}

/* ── 2. DROPDOWN ────────────────────────────────────────────────
   Fix: react-select rendert ein weisses Eingabefeld ueber dem Wert
   (der weisse Klotz links im Projekt-Dropdown). */

.tln-dropdown .Select-input,
.tln-dropdown .Select-input > input,
.tln-dropdown .Select-control,
.tln-dropdown .Select-multi-value-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

.tln-dropdown .Select-input > input {
  color: #f8fafc !important;
  caret-color: #3b82f6 !important;
}

.tln-dropdown .Select-control {
  background: #111d31 !important;
  transition: border-color 160ms var(--tln-ease), box-shadow 160ms var(--tln-ease) !important;
}

.tln-dropdown:hover .Select-control {
  border-color: rgba(96, 165, 250, .45) !important;
}

.tln-dropdown .is-open .Select-control,
.tln-dropdown .is-focused:not(.is-open) .Select-control {
  border-color: #3b82f6 !important;
  box-shadow: var(--tln-glow) !important;
}

.tln-dropdown .Select-arrow {
  transition: transform 200ms var(--tln-ease);
}

.tln-dropdown .is-open .Select-arrow {
  transform: rotate(180deg);
}

.tln-dropdown .Select-menu-outer {
  animation: tln-drop-in 160ms var(--tln-ease);
}

.tln-dropdown .Select-option {
  transition: background 120ms var(--tln-ease), padding-left 140ms var(--tln-ease) !important;
}

.tln-dropdown .Select-option.is-focused {
  padding-left: 18px !important;
  box-shadow: inset 3px 0 0 0 #3b82f6;
}

@keyframes tln-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* aktives Projekt-Dropdown wieder normal (war fuer disabled gestylt) */
.tln-project-dropdown:not(.Select--disabled) .Select-control {
  border-style: solid !important;
  background: #111d31 !important;
  cursor: pointer !important;
}

/* ── 3. TABELLE: Zeilen lebendiger ──────────────────────────────
   Der weisse-Zeile-Fix selbst sitzt im css-Prop der DataTable
   (CSS-Variablen am Container). Hier nur die Feinheiten. */

.dash-table-container .dash-spreadsheet-inner tr {
  transition: transform 140ms var(--tln-ease);
}

.dash-table-container .dash-spreadsheet-inner td.dash-cell {
  transition: background-color 150ms var(--tln-ease),
              box-shadow 150ms var(--tln-ease),
              color 150ms var(--tln-ease) !important;
}

.dash-table-container th {
  transition: color 140ms var(--tln-ease), background 140ms var(--tln-ease);
}

.dash-table-container th:hover {
  background: rgba(59, 130, 246, .06) !important;
  color: #f8fafc !important;
}

.dash-table-container .column-header--sort {
  transition: color 140ms var(--tln-ease), transform 140ms var(--tln-ease);
}

.dash-table-container th:hover .column-header--sort {
  transform: scale(1.18);
  color: #60a5fa !important;
}

/* Checkbox-Spalte entschaerfen */
.dash-table-container .dash-select-cell {
  background: transparent !important;
}

.dash-table-container input[type="checkbox"] {
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Tooltip weicher einblenden */
.dash-table-tooltip {
  animation: tln-tip-in 140ms var(--tln-ease);
}

@keyframes tln-tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 4. KARTEN & KPI: dezentes Anheben ──────────────────────────*/

.tln-metric-card,
.tln-chart-panel,
.tln-table-panel,
.tln-customer-panel,
.tln-usage-panel {
  transition: transform 200ms var(--tln-ease),
              border-color 200ms var(--tln-ease),
              box-shadow 200ms var(--tln-ease);
}

.tln-metric-card:hover,
.tln-chart-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .32) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

/* ── 5. INHALT SANFT EINBLENDEN ─────────────────────────────────*/

.tln-dashboard-content > * {
  animation: tln-rise 260ms var(--tln-ease) both;
}

.tln-dashboard-content > *:nth-child(1) { animation-delay: 0ms; }
.tln-dashboard-content > *:nth-child(2) { animation-delay: 40ms; }
.tln-dashboard-content > *:nth-child(3) { animation-delay: 80ms; }
.tln-dashboard-content > *:nth-child(4) { animation-delay: 120ms; }
.tln-dashboard-content > *:nth-child(5) { animation-delay: 160ms; }
.tln-dashboard-content > *:nth-child(n+6) { animation-delay: 200ms; }

@keyframes tln-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 6. BUTTONS ─────────────────────────────────────────────────*/

.tln-primary-button,
.tln-secondary-button {
  transition: transform 160ms var(--tln-ease),
              background 160ms var(--tln-ease),
              border-color 160ms var(--tln-ease),
              box-shadow 160ms var(--tln-ease) !important;
}

.tln-primary-button:hover {
  box-shadow: 0 10px 26px rgba(59, 130, 246, .3);
}

.tln-primary-button:active,
.tln-secondary-button:active {
  transform: translateY(0) scale(.985) !important;
}

/* ── 7. PROJEKTPHASEN: Zeilen reagieren ─────────────────────────*/

.tln-phase-row {
  transition: transform 160ms var(--tln-ease);
}

.tln-phase-row:hover {
  transform: translateX(3px);
}

/* ── 8. SCROLLBAR ───────────────────────────────────────────────*/

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar,
.tln-dashboard-content ::-webkit-scrollbar {
  height: 9px;
  width: 9px;
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-thumb,
.tln-dashboard-content ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .22);
  border-radius: 999px;
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover,
.tln-dashboard-content ::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, .42);
}

.dash-table-container .dash-spreadsheet-container::-webkit-scrollbar-track,
.tln-dashboard-content ::-webkit-scrollbar-track {
  background: transparent;
}

/* ── 9. BARRIEREFREIHEIT ────────────────────────────────────────
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat,
   bekommt keine Animationen. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   NACHTRAG — weisse Reste, volle Zusammenfassung, Zeitraum,
   Diagramme
   ════════════════════════════════════════════════════════════════ */

/* ── A. ALLE WEISSEN FLAECHEN IN DER TABELLE ────────────────────
   Dash setzt --hover per Default fast-weiss. Die Variable erreicht
   nicht jeden Teilbaum, deshalb hier zusaetzlich hart gesetzt und
   die betroffenen Zellen explizit ueberschrieben. */

.dash-table-container,
.dash-table-container .dash-spreadsheet,
.dash-table-container .dash-spreadsheet-container,
.dash-table-container .dash-spreadsheet-inner,
.dash-table-container .dash-fixed-content,
.dash-table-container .dash-header,
.dash-table-container .dash-filter {
  --hover: #17243a !important;
  --selected-row: #17243a !important;
  --selected-background: #17243a !important;
  --background-color-ellipses: #0d1728 !important;
  --faded-dropdown: #111d31 !important;
  --text-color: #f8fafc !important;
  --faded-text: #94a3b8 !important;
  --muted: #94a3b8 !important;
  --accent: #3b82f6 !important;
  --border: rgba(148, 163, 184, .16) !important;
}

/* Spaltenkopf beim Hover (Screen 1) */
.dash-table-container th,
.dash-table-container th.dash-header {
  background-color: #111d31 !important;
}

.dash-table-container th:hover,
.dash-table-container th.dash-header:hover,
.dash-table-container th.dash-header.focused,
.dash-table-container th.focused {
  background-color: rgba(59, 130, 246, .12) !important;
  color: #f8fafc !important;
}

.dash-table-container th .column-header-name,
.dash-table-container th:hover .column-header-name {
  color: #f8fafc !important;
}

/* Checkbox-Spalte (Screen 2) */
.dash-table-container td.dash-select-cell,
.dash-table-container th.dash-select-header {
  background-color: #0d1728 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .08) !important;
}

.dash-table-container tr:hover td.dash-select-cell {
  background-color: #17243a !important;
}

/* Filterzeile (Screen 3) */
.dash-table-container td.dash-filter,
.dash-table-container .dash-filter,
.dash-table-container .dash-filter.column-0,
.dash-table-container tr:hover td.dash-filter {
  background-color: #111d31 !important;
}

/* Sicherheitsnetz: nichts in der Tabelle darf weiss werden */
.dash-table-container td[style*="rgb(255, 255, 255)"],
.dash-table-container th[style*="rgb(255, 255, 255)"] {
  background-color: #17243a !important;
}

/* ── B. ZUSAMMENFASSUNG VOLL ANZEIGEN ───────────────────────────
   dashboard.css klemmt die Spalte auf 3 Zeilen (-webkit-line-clamp).
   Das erzeugt die "…" und machte den Tooltip noetig. */

.dash-table-container .dash-cell[data-dash-column="summary"] .dash-cell-value {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.6 !important;
}

.dash-table-container .dash-cell[data-dash-column="summary"] {
  overflow: visible !important;
  vertical-align: top !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.dash-table-container .dash-cell-value {
  text-overflow: clip !important;
}

.dash-table-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-inner tr {
  height: auto !important;
}

/* ── C. ZEITRAUM / DATEPICKER (Screen 4) ────────────────────────
   Gleiche Interaktionssprache wie das Projekt-Dropdown. */

.tln-datepicker .DateRangePickerInput {
  transition: border-color 160ms var(--tln-ease),
              box-shadow 160ms var(--tln-ease) !important;
}

.tln-datepicker:hover .DateRangePickerInput {
  border-color: rgba(96, 165, 250, .45) !important;
}

.tln-datepicker .DateRangePickerInput:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: var(--tln-glow) !important;
}

.tln-datepicker .DateInput_input {
  transition: background 160ms var(--tln-ease), color 160ms var(--tln-ease) !important;
}

.tln-datepicker .DateInput_input:hover {
  background: #17243a !important;
}

.tln-datepicker .DateInput_input__focused {
  background: #17243a !important;
  color: #f8fafc !important;
}

.tln-datepicker .DateRangePickerInput_arrow svg {
  transition: transform 200ms var(--tln-ease), fill 200ms var(--tln-ease);
}

.tln-datepicker:hover .DateRangePickerInput_arrow svg {
  fill: #60a5fa !important;
}

/* Pfeilbereich darf nicht von den Datumsfeldern ueberdeckt werden */
.tln-datepicker .DateRangePickerInput_arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 4px;
  background: transparent !important;
}

/* Beide Haelften gleich einfaerben - vorher war nur eine hell */
.tln-datepicker .DateInput,
.tln-datepicker .DateInput_input,
.tln-datepicker .DateInput_input__focused {
  background: #111d31 !important;
}

.tln-datepicker .DateInput_input:hover {
  background: #17243a !important;
}

/* Kalender einblenden */
.tln-datepicker .DateRangePicker_picker {
  animation: tln-drop-in 180ms var(--tln-ease);
}

.tln-datepicker .CalendarDay__default {
  transition: background 130ms var(--tln-ease),
              transform 130ms var(--tln-ease),
              border-color 130ms var(--tln-ease) !important;
}

.tln-datepicker .CalendarDay__default:hover {
  transform: scale(1.09);
  z-index: 2;
  position: relative;
}

.tln-datepicker .DayPickerNavigation_button {
  transition: background 140ms var(--tln-ease),
              border-color 140ms var(--tln-ease),
              transform 140ms var(--tln-ease) !important;
}

.tln-datepicker .DayPickerNavigation_button:hover {
  background: rgba(59, 130, 246, .16) !important;
  border-color: rgba(96, 165, 250, .5) !important;
  transform: translateY(-1px);
}

/* ── D. DIAGRAMME & RESTLICHE BOXEN ─────────────────────────────*/

.tln-chart-panel,
.tln-table-panel,
.tln-customer-panel,
.tln-usage-panel,
.tln-task-section,
.tln-provider-section {
  transition: transform 200ms var(--tln-ease),
              border-color 200ms var(--tln-ease),
              box-shadow 200ms var(--tln-ease) !important;
}

.tln-table-panel:hover,
.tln-customer-panel:hover,
.tln-usage-panel:hover,
.tln-task-section:hover,
.tln-provider-section:hover {
  border-color: rgba(96, 165, 250, .26) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}

/* Plotly: Kurve leicht hervorheben, Modebar weg */
.tln-graph .js-plotly-plot .plotly .modebar {
  display: none !important;
}

.tln-graph {
  transition: opacity 200ms var(--tln-ease);
}

.js-plotly-plot .plotly .bars path,
.js-plotly-plot .plotly .points path {
  transition: opacity 140ms var(--tln-ease);
}

.js-plotly-plot:hover .plotly .bars path {
  opacity: .94;
}

/* Hoverlabel von Plotly an das Design angleichen */
.js-plotly-plot .hoverlayer .hovertext {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
}

/* Fortschrittsbalken in der Projektansicht animieren */
.tln-phase-row div[style*="border-radius: 999px"] > div {
  transition: width 420ms var(--tln-ease) !important;
}

/* ════════════════════════════════════════════════════════════════
   NACHTRAG 2 — weisse Kopfzellen, moderne Checkboxen,
   Textmarkierung, Kopier-Feedback
   ════════════════════════════════════════════════════════════════ */

/* ── E. WEISSE KOPFZELLEN ENDGUELTIG ────────────────────────────
   Ursache: Filterzellen sind <th>, nicht <td> — und der Hover-
   Hintergrund haengt an einem verschachtelten <div> im Header,
   nicht an der Zelle selbst. Deshalb hier Zelle UND Kinder. */

.dash-table-container .dash-spreadsheet-inner th,
.dash-table-container .dash-spreadsheet-inner th > div,
.dash-table-container .dash-spreadsheet-inner th > div > div,
.dash-table-container .dash-header,
.dash-table-container .dash-header > div,
.dash-table-container .dash-header .column-header-name,
.dash-table-container .dash-header .column-header--sort {
  background-color: transparent !important;
  color: #94a3b8 !important;
}

.dash-table-container .dash-spreadsheet-inner th.dash-header {
  background-color: #111d31 !important;
}

.dash-table-container .dash-spreadsheet-inner th.dash-filter,
.dash-table-container .dash-spreadsheet-inner th.dash-filter > div {
  background-color: #111d31 !important;
}

/* Hover / Fokus / Sortierung — nie weiss, immer blauer Hauch */
.dash-table-container .dash-spreadsheet-inner th:hover,
.dash-table-container .dash-spreadsheet-inner th.focused,
.dash-table-container .dash-spreadsheet-inner th.dash-header:hover,
.dash-table-container .dash-spreadsheet-inner th.dash-header.focused,
.dash-table-container .dash-spreadsheet-inner th.column--selected,
.dash-table-container .dash-spreadsheet-inner th.cell--selected,
.dash-table-container .dash-spreadsheet-inner td.column--selected {
  background-color: rgba(59, 130, 246, .13) !important;
}

.dash-table-container .dash-spreadsheet-inner th:hover .column-header-name,
.dash-table-container .dash-spreadsheet-inner th:hover .column-header--sort {
  color: #f8fafc !important;
}

/* Dash markiert beim Sortieren die ganze Spalte — abschalten */
.dash-table-container .dash-spreadsheet-inner td.focused,
.dash-table-container .dash-spreadsheet-inner td.cell--selected {
  background-color: #17243a !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .45) !important;
}

/* ── F. MODERNE CHECKBOXEN ──────────────────────────────────────
   Native Kaestchen raus, eigenes rundes Feld mit Haken. */

.dash-table-container input[type="checkbox"],
.dash-table-container .dash-select-cell input[type="checkbox"],
.dash-table-container .dash-select-header input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  border: 1.5px solid rgba(148, 163, 184, .38) !important;
  border-radius: 5px !important;
  background: #111d31 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background 150ms var(--tln-ease),
              border-color 150ms var(--tln-ease),
              transform 150ms var(--tln-ease),
              box-shadow 150ms var(--tln-ease);
}

.dash-table-container input[type="checkbox"]:hover {
  border-color: #60a5fa !important;
  transform: scale(1.08);
}

.dash-table-container input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .22) !important;
}

.dash-table-container input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
  border-color: #3b82f6 !important;
}

.dash-table-container input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
  animation: tln-check 180ms var(--tln-ease);
}

@keyframes tln-check {
  from { opacity: 0; transform: rotate(43deg) scale(.5); }
  to   { opacity: 1; transform: rotate(43deg) scale(1); }
}

.dash-table-container td.dash-select-cell,
.dash-table-container th.dash-select-header {
  text-align: center !important;
  vertical-align: middle !important;
  width: 42px !important;
}

/* ── G. TEXTMARKIERUNG ──────────────────────────────────────────
   Statt der weissen Systemmarkierung ein blauer Hauch. */

::selection {
  background: rgba(59, 130, 246, .34);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(59, 130, 246, .34);
  color: #ffffff;
}

/* Zellinhalte sollen markierbar sein — Dash sperrt das teilweise */
.dash-table-container .dash-cell-value,
.dash-table-container .dash-cell,
.dash-table-container td {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* ── H. ZUSAMMENFASSUNG: KLICKEN ZUM KOPIEREN ───────────────────*/

.dash-table-container .dash-cell[data-dash-column="summary"] {
  cursor: copy !important;
  border-radius: 8px;
  transition: background-color 150ms var(--tln-ease),
              box-shadow 150ms var(--tln-ease) !important;
}

.dash-table-container .dash-cell[data-dash-column="summary"]:hover {
  background-color: rgba(59, 130, 246, .09) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .28) !important;
}

.dash-table-container .dash-cell[data-dash-column="summary"].tln-copied {
  background-color: rgba(34, 197, 94, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .5) !important;
}

/* Toast */
.tln-toast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid rgba(34, 197, 94, .38);
  border-radius: 12px;
  background: rgba(17, 29, 49, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  color: #f8fafc;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  animation: tln-toast-in 220ms var(--tln-ease);
}

.tln-toast::before {
  content: "";
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: inset 0 0 0 2px rgba(17, 29, 49, .97),
              inset 0 0 0 3px #22c55e;
}

.tln-toast--out {
  animation: tln-toast-out 200ms var(--tln-ease) forwards;
}

@keyframes tln-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tln-toast-out {
  to { opacity: 0; transform: translateY(10px) scale(.97); }
}


/* ════════════════════════════════════════════════════════════════
   NACHTRAG 3 — Eskalation ueber die Tabellen-ID
   Klassenregeln haben nicht gegriffen. #call-table ist
   spezifischer als jede Klassenregel von dash-table.
   ════════════════════════════════════════════════════════════════ */

#call-table th,
#call-table th > div,
#call-table th > div > div,
#call-table th span,
#call-table .dash-header,
#call-table .dash-filter {
  background-color: #111d31 !important;
  background-image: none !important;
}

#call-table th:hover,
#call-table th:hover > div,
#call-table th:hover > div > div,
#call-table th.focused,
#call-table th.dash-header:hover,
#call-table th.dash-header.focused,
#call-table th.column--selected,
#call-table td.column--selected {
  background-color: #16233a !important;
  background-image: none !important;
  color: #f8fafc !important;
}

#call-table th:hover .column-header-name,
#call-table th:hover .column-header--sort,
#call-table th.focused .column-header-name {
  color: #f8fafc !important;
}

#call-table td.dash-select-cell,
#call-table th.dash-select-header {
  background-color: #0d1728 !important;
}

#call-table tr:hover td {
  background-color: #17243a !important;
}

/* Checkbox: appearance muss VOR background stehen, sonst
   zeichnet die UA-Stylesheet-Box weiter darueber */
#call-table input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #111d31 !important;
  background-image: none !important;
  border: 1.5px solid rgba(148, 163, 184, .4) !important;
  border-radius: 5px !important;
  width: 17px !important;
  height: 17px !important;
  cursor: pointer !important;
}

#call-table input[type="checkbox"]:checked {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* ════════════════════════════════════════════════════════════════
   NACHTRAG 4 — weisse Linien, Export-Beschnitt, Fokusrahmen
   ════════════════════════════════════════════════════════════════ */

/* ── I. WEISSE TRENNLINIEN ──────────────────────────────────────
   dash-table zeichnet Zellraender in einem hellen Standardton.
   Bei Auswahl werden sie zusaetzlich hervorgehoben. */

#call-table td,
#call-table th,
#call-table .dash-cell,
#call-table .dash-header,
#call-table .dash-filter,
#call-table .dash-select-cell,
#call-table .dash-select-header {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .09) !important;
  outline: none !important;
}

#call-table th,
#call-table .dash-header {
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
}

/* Kein Fokusring vom Browser */
#call-table *:focus,
#call-table *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#call-table input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .16) !important;
}

/* ── J. FOKUSRAHMEN LOESEN SICH WIEDER ──────────────────────────
   Vorher blieb der blaue Kasten stehen, auch nach Klick daneben.
   Sichtbar nur solange die Tabelle den Fokus hat. */

#call-table td.focused,
#call-table td.cell--selected {
  background-color: #17243a !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, .09) !important;
}

#call-table:focus-within td.focused,
#call-table:focus-within td.cell--selected {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .38) !important;
}

/* Manuell geloest per JS */
#call-table.tln-blur td.focused,
#call-table.tln-blur td.cell--selected {
  box-shadow: none !important;
  background-color: transparent !important;
}

/* ── K. EXPORT-BUTTON WIRD NICHT MEHR BESCHNITTEN ───────────────*/

#call-table .dash-spreadsheet-menu,
.dash-table-container .dash-spreadsheet-menu {
  overflow: visible !important;
  padding: 4px 4px 10px 4px !important;
  margin-bottom: 6px !important;
}

#call-table .dash-spreadsheet-menu .export,
.dash-table-container .dash-spreadsheet-menu .export {
  position: relative;
  z-index: 3;
  margin: 2px !important;
}

.tln-table-panel,
#call-table,
.dash-table-container {
  overflow: visible !important;
}

#call-table .dash-spreadsheet-container {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* ── L. ZUSAMMENFASSUNG: AFFORDANZ STATT STARREM RAHMEN ─────────*/

#call-table .dash-cell[data-dash-column="summary"] {
  position: relative;
  cursor: zoom-in !important;
  box-shadow: none !important;
}

#call-table .dash-cell[data-dash-column="summary"]::after {
  content: "⤢";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(59, 130, 246, .16);
  color: #93c5fd;
  font-size: 12px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity 160ms var(--tln-ease), transform 160ms var(--tln-ease);
  pointer-events: none;
}

#call-table .dash-cell[data-dash-column="summary"]:hover::after {
  opacity: 1;
  transform: scale(1);
}

#call-table .dash-cell[data-dash-column="summary"]:hover {
  background-color: rgba(59, 130, 246, .07) !important;
}

/* ── M. MODAL FUER DIE VOLLE ZUSAMMENFASSUNG ────────────────────*/

.tln-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(4, 10, 20, .74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: tln-fade 180ms var(--tln-ease);
}

.tln-modal-backdrop.tln-out {
  animation: tln-fade-out 160ms var(--tln-ease) forwards;
}

.tln-modal {
  width: min(660px, 100%);
  max-height: 78vh;
  overflow: auto;
  padding: 26px 28px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: linear-gradient(180deg, #111d31, #0d1728);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62);
  animation: tln-modal-in 220ms var(--tln-ease);
}

.tln-modal-backdrop.tln-out .tln-modal {
  animation: tln-modal-out 160ms var(--tln-ease) forwards;
}

.tln-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.tln-modal-title {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
}

.tln-modal-meta {
  margin-bottom: 18px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #60a5fa;
}

.tln-modal-body {
  color: #f8fafc;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  user-select: text;
}

.tln-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.tln-modal-btn {
  padding: 10px 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 10px;
  background: #17243a;
  color: #f8fafc;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform 150ms var(--tln-ease),
              background 150ms var(--tln-ease),
              border-color 150ms var(--tln-ease);
}

.tln-modal-btn:hover {
  transform: translateY(-1px);
  background: rgba(59, 130, 246, .18);
  border-color: rgba(96, 165, 250, .55);
}

.tln-modal-btn--primary {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border-color: transparent;
}

.tln-modal-btn--done {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.tln-modal-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 9px;
  background: transparent;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms var(--tln-ease), color 150ms var(--tln-ease);
}

.tln-modal-close:hover {
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
}

@keyframes tln-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes tln-fade-out { to { opacity: 0; } }

@keyframes tln-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tln-modal-out {
  to { opacity: 0; transform: translateY(10px) scale(.98); }
}

/* ── N. ZUSATZ-DIAGRAMME BEKOMMEN DEN HOVER ─────────────────────*/

.tln-extra-charts .tln-chart-panel {
  transition: transform 200ms var(--tln-ease),
              border-color 200ms var(--tln-ease),
              box-shadow 200ms var(--tln-ease) !important;
}

.tln-extra-charts .tln-chart-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .32) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

/* ════════════════════════════════════════════════════════════════
   NACHTRAG 5 — Symmetrie Filterleiste, Panel-Hoehen
   ════════════════════════════════════════════════════════════════ */

/* ── O. FILTERLEISTE SYMMETRISCH ────────────────────────────────
   Vorher: 3 Spalten fuer 4 Elemente, unterschiedliche Hoehen. */

.tln-filterbar {
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) auto auto !important;
  align-items: end !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

/* Gleiche Hoehe, gleiche Rundung — aber KEIN flex.
   react-select v1 baut die Zeile intern als Tabelle auf; mit
   display:flex rutscht der Pfeil mitten in den Text. */
.tln-dropdown .Select-control,
.tln-dropdown .is-focused .Select-control {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 11px !important;
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}

.tln-dropdown .Select-multi-value-wrapper {
  display: table-cell !important;
  vertical-align: middle !important;
  padding-left: 4px !important;
}

.tln-dropdown .Select-arrow-zone {
  display: table-cell !important;
  vertical-align: middle !important;
  width: 30px !important;
  padding-right: 12px !important;
  text-align: right !important;
}

.tln-dropdown .Select-value,
.tln-dropdown .Select-placeholder {
  line-height: 42px !important;
  padding-right: 34px !important;
}

.tln-dropdown .Select-input {
  height: 42px !important;
}

.tln-datepicker,
.tln-datepicker .DateRangePickerInput {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
}

.tln-datepicker .DateInput {
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
}

.tln-datepicker .DateInput_input {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
  text-align: center !important;
}

.tln-refresh-button {
  height: 44px !important;
  border-radius: 11px !important;
  padding: 0 26px !important;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .tln-filterbar {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  .tln-filterbar {
    grid-template-columns: 1fr !important;
  }
  .tln-datepicker,
  .tln-datepicker .DateRangePickerInput {
    width: 100% !important;
  }
}

/* ── P. ZUSATZ-PANELS: EIGENE HOEHENLOGIK ───────────────────────
   tln-chart-panel erzwingt min-height 438px - das ist fuer die
   Statustabelle falsch, die soll mit dem Inhalt wachsen. */

.tln-extra-panel {
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  height: auto !important;
  transition: transform 200ms var(--tln-ease),
              border-color 200ms var(--tln-ease),
              box-shadow 200ms var(--tln-ease);
}

.tln-extra-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .32) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.tln-extra-panel--chart {
  min-height: 340px !important;
}

.tln-extra-charts {
  align-items: start;
}

/* ── Q. FILTERLEISTE OHNE ORGANISATIONS-AUSWAHL ─────────────────
   Kundenansicht und Web-Projekte: das Feld faellt weg, die
   restlichen drei ruecken auf. */

.tln-filterbar--nocustomer {
  grid-template-columns: minmax(240px, 1fr) auto auto !important;
}

@media (max-width: 900px) {
  .tln-filterbar--nocustomer {
    grid-template-columns: 1fr !important;
  }
}

/* ── R. AUTOFILL: WEISSE EINGABEFELDER ──────────────────────────
   Chrome faerbt automatisch ausgefuellte Felder hart weiss.
   Der Trick: ein sehr langer inset-Schatten uebermalt die
   UA-Fuellung, background-color allein greift hier nicht. */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #111d31 inset !important;
  box-shadow: 0 0 0 1000px #111d31 inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #3b82f6 !important;
  transition: background-color 999999s ease-in-out 0s !important;
}

.tln-login-card input:-webkit-autofill,
.tln-login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0d1728 inset !important;
  box-shadow: 0 0 0 1000px #0d1728 inset !important;
}