/* cin_user_report */
/* user-report.css */
/* Kommentartexte mit Zeilenumbrüchen anzeigen */
.cin-user-report-comment-text {
  white-space: pre-wrap;
}

/* Aufklappbare Zeilen im Hub: Chevron dreht beim Öffnen mit. Die Karten im
   Popup klappen seit der Leseansicht (R.6) nicht mehr auf - dort führt ein
   Klick in den Bericht. */
.cin-user-report-header .cin-user-report-chevron {
  transition: transform 0.2s;
}

.cin-user-report-header[aria-expanded="true"] .cin-user-report-chevron {
  transform: rotate(90deg);
}

/* ===== Hub im rechten Bereich des Team-Chats (R.5) =====

   Der Eintrag in der Seitenleiste kommt jetzt vom Core (Abschnitt
   "Erweiterungen") und braucht hier keine eigene Klasse mehr. */

.cin-user-report-hub-toolbar {
  border-bottom: 1px solid var(--cin-border);
}

.cin-user-report-hub-foot {
  border-top: 1px solid var(--cin-border);
}

/* Tageskopf: klebt beim Scrollen oben, damit die Bilanz beim Durchsehen einer
   langen Liste nicht verloren geht. */
.cin-user-report-hub-dayhead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--cin-surface);
  border-bottom: 1px solid var(--cin-border);
}

.cin-user-report-hub-day + .cin-user-report-hub-day {
  margin-top: 0.5rem;
}

.cin-user-report-hub-row + .cin-user-report-hub-row {
  border-top: 1px solid var(--cin-border);
}

.cin-user-report-hub-row .cin-user-report-header {
  cursor: pointer;
  transition: background-color 0.15s;
}

.cin-user-report-hub-row .cin-user-report-header:hover {
  background-color: var(--cin-surface-hover);
}

/* ===== Spalten in der Hub-Liste =====

   Vorher stand alles in einer Flex-Zeile: die Pillen begannen dort, wo der
   Titel zufaellig endete, die Tags dahinter wieder woanders. Bei zehn Zeilen
   untereinander ergibt das eine unruhige Treppe. Als Raster hat jede Angabe
   ihre feste Spalte und beginnt in jeder Zeile an derselben Stelle.

   Alle Spalten mit minmax(0, ...): so schrumpfen sie mit, statt die Zeile
   herauszuschieben - der Hub steht in einer Flaeche, deren Breite der Nutzer
   zieht. */
.cin-user-report-hub-grid {
  display: grid;
  grid-template-columns:
    1rem                    /* Chevron */
    minmax(0, 7rem)         /* Verfasser */
    minmax(0, 1fr)          /* Titel der Berichtsart */
    minmax(0, 15rem)        /* Zustands-Pillen */
    minmax(0, 11rem)        /* CRM-Tags */
    minmax(0, 2.5rem)       /* Kommentare */
    minmax(0, 3rem)         /* Uhrzeit */
    minmax(0, 7.5rem);      /* Lesen, Stift und Zahnrad */
  align-items: center;
  column-gap: 0.5rem;
}

/* Die Zellen, die mehrere Dinge tragen. Ohne min-width: 0 wuerde eine lange
   Pille die Spalte aufblaehen, statt sich zu kuerzen. */
.cin-user-report-hub-cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

/* Schmale Flaeche: acht Spalten nebeneinander sind hier nicht lesbar. Vorher
   loeste sich die Zeile in eine Flex-Wolke auf und brach in jeder Zeile
   woanders um - eine Liste, in der nichts untereinander stand.

   Stattdessen zwei feste Zeilen: oben, WESSEN Bericht das ist und worum es
   geht; unten links die Zustands-Pillen, rechts die Knoepfe und dazwischen
   alles Weitere. Das Chevron steht ueber beide Zeilen. */
@media (max-width: 991.98px) {
  .cin-user-report-hub-grid {
    grid-template-columns: 1rem minmax(0, auto) minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "chev who   what what what what"
      "chev pills tags comm time acts";
    row-gap: 0.125rem;
  }

  .cin-user-report-col-chev  { grid-area: chev; align-self: center; }
  .cin-user-report-col-who   { grid-area: who; }
  .cin-user-report-col-what  { grid-area: what; }
  .cin-user-report-col-pills { grid-area: pills; }
  .cin-user-report-col-tags  { grid-area: tags; }
  .cin-user-report-col-comm  { grid-area: comm; }
  .cin-user-report-col-time  { grid-area: time; }
  .cin-user-report-col-acts  { grid-area: acts; }

  /* Von den Pillen bleibt nur ihr Zeichen - der Tooltip sagt weiterhin, was es
     bedeutet. Gilt nur in der Liste: im Popup ist Platz fuer den Text. */
  .cin-user-report-hub-row .cin-user-report-pill-label {
    display: none;
  }

  /* Tags waeren hier eine zweite Textwand. Stattdessen das uebliche Zeichen mit
     Zaehler, das die Chips auf Klick zeigt - wie am Aufgaben- und
     Projektformular. */
  .cin-user-report-hub-row .cin-user-report-hub-chips {
    display: none;
  }

  .cin-user-report-hub-tagmenu {
    display: inline-block;
  }
}

/* Der Tag ist zugeklappt: dann sagt die Kopfzeile, wie viel darunter liegt.
   Offen waere die Zahl bloss Rauschen - man sieht die Zeilen ja. */
.cin-user-report-hub-day:not(.cin-user-report-hub-day-collapsed) .cin-user-report-hub-daycount {
  display: none;
}

.cin-user-report-hub-dayhead .cin-user-report-chevron {
  transition: transform 0.2s;
}

.cin-user-report-hub-dayhead[aria-expanded="true"] .cin-user-report-chevron {
  transform: rotate(90deg);
}

.cin-user-report-hub-dayhead {
  cursor: pointer;
}

.cin-user-report-hub-dayhead:hover {
  background-color: var(--cin-surface-hover);
}

/* Ungelesen wie im Postfach: ein farbiger Balken an der Kante, keine zweite
   Hintergrundfarbe - die traegt schon der Zebra-Wechsel der Liste. */
.cin-user-report-hub-row-unread {
  border-left: 3px solid var(--bs-primary);
}

.cin-user-report-hub-row:not(.cin-user-report-hub-row-unread) {
  border-left: 3px solid transparent;
}

/* Ein abgeblendeter Knopf in der Zeile wird grau, nicht blass-blau.
   btn-outline-primary behaelt im disabled-Zustand seine Primaerfarbe und wird
   nur durchsichtiger - neben zwei nutzbaren Knoepfen derselben Farbe ist das
   auf einen Blick nicht zu unterscheiden. Der Unterschied soll die Farbe
   tragen, nicht die Durchsichtigkeit; deshalb auch volle Deckkraft.
   --cin-text-muted ist in beiden Themes lesbar (#9ca3af hell, #6b7280 dunkel). */
.cin-user-report-hub-row .btn:disabled {
  color: var(--cin-text-muted);
  border-color: var(--cin-text-muted);
  opacity: 1;
}

/* Zustands-Pillen tragen ein Zeichen und ihren Text. Auf schmalen Flaechen
   faellt der Text weg und das Zeichen bleibt - dieselbe Loesung wie an der
   Abhaengigkeiten-Karte der Aufgaben, wo „blockiert" auf das Schloss
   zusammenfaellt. */
.cin-user-report-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Das Tag-Zeichen mit Zaehler steht nur auf schmalen Flaechen; auf breiten
   zeigt dieselbe Spalte die Chips selbst. */
.cin-user-report-hub-tagmenu {
  display: none;
}

/* Ein geschriebener Kommentar - im Popup wie im Hub dieselbe Optik. */
.cin-user-report-comment {
  border-left: 2px solid var(--cin-border);
}

/* ===== Adminkonsolen-Tab "Tagesberichte" ===== */

/* Tabellen-Standard des CRM: Zebra ueber die Flaechen-Variablen, Hover in
   Primaerfarbe. Masse wie im Aufgaben-Tab (table-sm), damit der Tab sich nicht
   vom Rest der Adminkonsole unterscheidet. */
#cin-user-report-profiles .table thead th {
  background-color: var(--cin-surface) !important;
  --bs-table-bg: var(--cin-surface) !important;
  font-weight: 600;
}

#cin-user-report-profiles .table thead th:first-child,
#cin-user-report-profiles .table tbody td:first-child {
  padding-left: 1.25rem !important;
}

#cin-user-report-profiles .table tbody tr td {
  height: 52px;
  vertical-align: middle;
}

#cin-user-report-profiles .table tbody tr:nth-child(odd) td {
  background-color: var(--cin-surface) !important;
  --bs-table-bg: var(--cin-surface) !important;
}

#cin-user-report-profiles .table tbody tr:nth-child(even) td {
  background-color: var(--cin-surface-subtle) !important;
  --bs-table-bg: var(--cin-surface-subtle) !important;
}

#cin-user-report-profiles .table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.05) !important;
  --bs-table-color-state: inherit !important;
}

[data-bs-theme="dark"] #cin-user-report-profiles .table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Werkzeugleiste wie im Kalendertypen-Tab (Rahmen + Flaeche). Das Suchfeld ist
   eine input-group - ein absolut positioniertes Icon rutschte je nach
   Feldhoehe unter das Eingabefeld. */
.cin-user-report-toolbar {
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface);
}

.cin-user-report-admin-search {
  max-width: 20rem;
}

.cin-user-report-col-mode {
  width: 15rem;
}

.cin-user-report-col-actions {
  width: 7rem;
}

.cin-user-report-team-filter {
  max-width: 16rem;
}

/* Personenauswahl im Anlege-Dialog: feste Hoehe, damit der Dialog nicht mit der
   Zahl der Konten waechst. */
.cin-user-report-member-list {
  max-height: 18rem;
}

.cin-user-report-member-row {
  cursor: pointer;
  border-bottom: 1px solid var(--cin-border);
  margin-bottom: 0;
}

.cin-user-report-member-row:last-child {
  border-bottom: 0;
}

.cin-user-report-member-row:hover {
  background-color: var(--cin-surface-hover);
}

/* Wochentag-Wähler wie in der Termin-Erinnerung des Kalenders (btn-check). */
.cin-user-report-weekdays .btn {
  flex: 1 1 auto;
  min-width: 3rem;
}


/* ===== Benachrichtigungskarte im "Notizen"-Chat ===== */

/* Gleiche Bildsprache wie die Termin- und Aufgabenkarten des Teamchats
   (senkrechtes Banner links), aber vollstaendig im Code der Erweiterung -
   der Core kennt den [user-report:]-Marker nicht. */
.cin-user-report-card {
  display: flex;
  margin: -0.5rem -0.75rem;
  min-height: 60px;
  cursor: pointer;
}

.cin-user-report-card-banner {
  width: 24px;
  min-width: 24px;
  background: var(--bs-primary);
  border-radius: 1rem 0 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cin-user-report-card-banner span {
  color: var(--bs-white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.cin-user-report-card-body {
  padding: 0.5rem 0.75rem;
  flex: 1;
  min-width: 0;
}

/* Aktionszeile des Editors: dezente Trennung statt grauer card-footer-Flaeche. */
.cin-user-report-actions {
  border-top: 1px solid var(--cin-border);
}

/* Reiterleiste sitzt direkt unter dem Kopf - ohne den Abstand wirkt sie angeklebt. */
.cin-user-report-modal .nav-line {
  margin-top: 0.25rem;
}

/* Der Rumpf des Popups ist die Arbeitsflaeche, die Karten darauf sind der
   Inhalt. Ohne Unterschied standen Themen, Kommentare und das Kaestchen
   „Danach weiter" auf derselben weissen Flaeche wie der Rahmen und wirkten
   lose. Dieselbe Trennung wie im Postfach-Popup: Flaeche tiefer, Karten in
   --cin-surface. Beide Themes ohne eigene Regel, weil beide Variablen
   themenabhaengig sind. */
.modal:has(.cin-user-report-modal) .modal-body {
  background-color: var(--cin-background);
}

.cin-user-report-modal .card {
  --bs-card-bg: var(--cin-surface);
  background-color: var(--cin-surface);
}

/* ===== Leseansicht (R.6) =====

   Der zweite Zustand desselben Popups: hier steht EIN Bericht, und er bekommt
   den Platz, den eine Listenzeile ihm nie geben konnte. */

/* Die Karten der Liste sind seit R.6 Türen, keine Aufklapper - der Zeiger und
   ein leiser Hover sagen das, genau wie in den Zeilen des Hubs. */
.cin-user-report-modal .card .cin-user-report-header {
  cursor: pointer;
  transition: background-color 0.15s;
}

.cin-user-report-modal .card .cin-user-report-header:hover {
  background-color: var(--cin-surface-hover);
}

/* Themen sind Abschnitte, keine Listenpunkte. Eine feine Linie ordnet sie,
   ohne wie eine Aufzählung zu wirken - dieselbe Sprache wie beim Kommentar. */
.cin-user-report-read-topic {
  border-left: 2px solid var(--cin-border);
  padding-left: 0.75rem;
}

/* Fließtext bleibt lesbar, auch wenn das Fenster breit ist: über etwa 70
   Zeichen je Zeile verliert das Auge beim Rücksprung die Zeile. */
.cin-user-report-read-topic p,
.cin-user-report-read-topic ul {
  max-width: 68ch;
}

.cin-user-report-read-topic p + p,
.cin-user-report-read-topic p + ul,
.cin-user-report-read-topic ul + p {
  margin-top: 0.5rem;
}

/* Die Kommentare gehören zum Bericht, stehen aber nicht in ihm. */
.cin-user-report-read-comments {
  border-top: 1px solid var(--cin-border);
}

/* ===== Schwebender Schnellzugriff (R.4) ===== */

/* Erscheint nur, solange ein Bericht offen ist. Ohne Schlagschatten - die
   Erhebung entsteht ueber Rahmen und Flaeche, wie bei den uebrigen runden
   Knoepfen des CRM. */
.cin-user-report-widget {
  position: fixed;
  z-index: 1035;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--bs-primary);
  background-color: var(--bs-primary);
  color: var(--bs-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  padding: 0;
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s, background-color 0.15s;
}

.cin-user-report-widget:hover {
  transform: scale(1.05);
}

.cin-user-report-widget-dragging {
  cursor: grabbing;
  transform: scale(1.05);
  opacity: 0.9;
  transition: none;
}

/* Ueberfaellig: dieselbe Warnfarbe wie die Fristanzeige der Aufgaben. */
.cin-user-report-widget-overdue {
  border-color: var(--cin-danger);
  background-color: var(--cin-danger);
}

/* Die Zahl sitzt halb auf dem farbigen Knopf und halb auf der Seite. Eine
   Flaeche aus --bs-body-bg war deshalb im Dunkelmodus dunkel auf dunkelblau und
   damit unlesbar. Weiss traegt in beiden Themes, weil der Untergrund an dieser
   Stelle immer der farbige Knopf ist. */
.cin-user-report-widget-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: var(--bs-white);
  color: var(--bs-primary);
  border: 1px solid var(--bs-white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.15rem;
}

.cin-user-report-widget-overdue .cin-user-report-widget-count {
  color: var(--cin-danger);
}

/* Das Menue "Berichte" in der Kopfzeile. Breiter als ein uebliches Dropdown,
   weil rechts der heutige Zustand steht und Titel sonst zu frueh abschneiden. */
.cin-user-report-kind-menu {
  min-width: 17rem;
  max-width: 24rem;
}

/* ===== Pille: die Berichtsart hinter diesem Bericht laeuft nicht mehr =====

   Eigene Klasse, weil die Palette der Erweiterung sonst nur text-bg-primary
   (neu / Eigener Bericht) und text-bg-warning (Entwurf) kennt - beide stehen in
   derselben Zeile schon fuer etwas anderes. text-bg-secondary scheidet aus.
   Sie soll auch nicht warnen: kaputt ist nichts, der Bericht bleibt gueltig.
   Sie soll nur zwei gleichnamige Berichtsarten unterscheidbar machen - und
   sagen, ob die Art beendet (wieder startbar) oder geloescht (endgueltig) ist. */
.cin-user-report-badge-kind {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  font-weight: 500;
}

/* Die Steuerung dazu in der Werkzeugleiste des Hubs. Etwas breiter als ein
   uebliches Dropdown, weil die Anlaesse ganze Saetze sind und sonst umbrechen. */
.cin-user-report-widget-menu {
  min-width: 18rem;
}

/* Abgeschaltete Anlaesse bleiben lesbar - sie sind gegenstandslos, nicht weg.
   Bootstraps Standard blasst nur das Kaestchen ab, nicht die Beschriftung. */
.cin-user-report-widget-menu .form-check-input:disabled ~ .form-check-label {
  opacity: 0.55;
}

/* ===== CRM-Tags (R.5 Block 2) =====

   Der Selector selbst kommt aus dem Core (CinCrmTags). Hier nur die Masse des
   Dropdowns - dieselben wie beim Aufgaben- und Projekt-Picker, damit es sich
   ueberall gleich anfuehlt. */
.cin-user-report-tag-menu {
  min-width: 320px;
  max-width: 460px;
  max-height: 78vh;
  overflow-y: auto;
}

/* Chips in einer Listenzeile duerfen die Zeile nicht sprengen: sie treten
   hinter Autor und Titel zurueck und verschwinden zuerst, wenn es eng wird. */
.cin-user-report-hub-chips {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
}

.cin-user-report-hub-chips .badge {
  font-size: 0.6875rem;
}

/* Im aufgeklappten Bereich sind die Chips normalerweise doppelt - dort stehen
   sie nur, wenn die Zeile sie nicht mehr tragen kann. */
.cin-user-report-hub-chips-detail {
  display: none;
}

/* Schmale Fenster: Autor und Titel tragen die Zeile, die Chips weichen dorthin,
   wo Platz ist - in den aufgeklappten Bereich. */
@media (max-width: 575.98px) {
  .cin-user-report-hub-chips {
    display: none;
  }

  .cin-user-report-hub-chips-detail {
    display: inline-flex;
  }
}

/* Anhang in der Kontakt-Uebersicht: eine ruhige Leiste statt einer Karte. Sie
   steht als letztes Element der Uebersicht und soll dort auch als Zusatz lesbar
   sein, nicht als weiterer Datenblock. */
.cin-user-report-contact-strip {
  padding: 0.625rem 1rem;
  border: 1px solid var(--cin-border);
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface);
}

/* ===== Dashboard-Widget =====

   Eine Zeile je Berichtsart. Sie ist ein Knopf, kein Listeneintrag: ein Klick
   oeffnet genau diesen Bericht. Bewusst ohne Rahmen und ohne eigene Flaeche -
   im Widget liegen mehrere Angaben eng beieinander, und umrandete Kaesten
   untereinander wirkten wie ein zweites Widget im Widget. */
.cin-user-report-dash-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.375rem;
  border: 0;
  border-radius: var(--bs-border-radius-sm);
  background-color: transparent;
  color: inherit;
  text-align: left;
  transition: background-color 0.15s;
}

.cin-user-report-dash-row:hover {
  background-color: var(--cin-surface-hover);
}

/* Der Zustand als Punkt. Bei einer Handvoll Zeilen liest sich Farbe schneller
   als Text - der Text daneben bleibt trotzdem stehen, denn Farbe allein ist
   keine Auskunft, und im Dunkelmodus schon gar nicht fuer jeden. */
.cin-user-report-dash-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--cin-text-muted);
}

.cin-user-report-dash-dot-sent {
  background-color: var(--cin-success);
}

.cin-user-report-dash-dot-draft {
  background-color: var(--cin-warning);
}

.cin-user-report-dash-dot-open {
  background-color: var(--bs-primary);
}