/* ============================================================
   ToLiDo — App-level styles
   Application-wide CSS that complements the MudBlazor theme.
   Keep component-specific styling in the component; put only
   cross-cutting, app-wide rules here (accessibility helpers,
   focus styles, skip links, etc.).
   ============================================================ */

/* ------------------------------------------------------------
   Accessibility helpers
   ------------------------------------------------------------ */

/* Visually hidden, but still announced by screen readers.
   Used for aria-live regions and off-screen labels. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Like .sr-only, but becomes visible when focused — for skip links
   ("Zum Inhalt springen") that should appear once a keyboard user
   tabs to them. */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Branding
   ------------------------------------------------------------ */

/* App-Icon in der AppBar (MainLayout.razor), links neben dem
   "ToLiDo"-Schriftzug. Rein dekorativ (aria-hidden im Markup) —
   der Schriftzug daneben trägt den Namen für Screenreader. logo-icon.svg
   selbst trägt seit der zweiten Iteration einen Grün-Verlauf plus einen
   halbtransparenten weissen Rand (statt reinem Flächen-Grün) — das
   entschärft den harten Kontrast zur blauen AppBar (--mud-palette-primary),
   ohne auf die Grün-/Häkchen-Marke zu verzichten. */
.tulidu-brand-logo {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}

/* Grün eingefärbtes "Li" im AppBar-Schriftzug (MainLayout.razor), als Echo des
   Icons/der externen Wortmarke (logo-full.png). Bewusst NICHT dasselbe Grün wie
   das Icon (#43A047 auf dem AppBar-Blau --mud-palette-primary käme nur auf
   Kontrast 1.82:1 — deutlich unter WCAG AA). #C8E6C9 (Material Green 100) liegt
   bei 4.46:1 gegen das AppBar-Blau, erfüllt AA für grossen Text (Typo.h5, hier
   massgeblich: mind. 3:1) komfortabel und bleibt knapp unter der 4.5:1-Schwelle
   für normalen Fliesstext, die für diese Textgrösse aber nicht gilt. */
.tulidu-brand-accent {
  color: #C8E6C9;
}

/* Visible appearance while focused — fixed top-left chip above everything else,
   doesn't push surrounding layout since it's taken out of flow either way. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  border-radius: 4px;
  z-index: 3000;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------
   Profilbild-Zuschnitt (REQ-02-009)
   Quadratischer, overflow:hidden-Container — der sichtbare
   Ausschnitt IST der spätere Zuschnitt. Bild wird per JS
   (tulido.imageCrop) positioniert/skaliert.
   ------------------------------------------------------------ */
.tulidu-crop-container {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e0e0;
  margin: 0 auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tulidu-crop-container:active {
  cursor: grabbing;
}

.tulidu-crop-container img {
  position: absolute;
  transform-origin: center center;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------
   Hinweis-/Beschreibungstexte
   Erläuterungen unter Überschriften und zu Formularfeldern. Einheitlich
   dezentes Dunkelgrau + kursiv (nicht der rote MudBlazor-Secondary-Akzent).
   Auf MudText anwenden und das Color-Attribut dort weglassen.
   ------------------------------------------------------------ */
.tulidu-hint {
  color: rgb(150, 150, 150);
  font-style: italic;
}

/* Greift auch, wenn die Klasse auf einem MudText-Wrapper sitzt, dessen
   eigentlicher Text im inneren .mud-typography-Element liegt. */
.tulidu-hint.mud-typography,
.tulidu-hint .mud-typography {
  color: rgb(150, 150, 150);
  font-style: italic;
}

/* ------------------------------------------------------------
   Freigabe-Zeile im „Liste teilen"-Dialog (REQ-04-008): eine Zeile pro
   Person mit Namen/Entfernen-Button oben und den Berechtigungs-Checkboxen
   darunter, per Trennlinie von der nächsten Zeile abgesetzt.
   ------------------------------------------------------------ */
.tulidu-share-row {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.tulidu-share-row:last-of-type {
  border-bottom: none;
}

/* ------------------------------------------------------------
   Listentyp-„Gepäckanhänger" (Listen-Übersicht)
   Stellt die Listentyp-Bezeichnung (z.B. „Packliste") als kleinen
   Anhänger neben dem Titel dar: abgerundeter Körper, links zu einer
   Spitze zulaufend, mit einem runden „Loch" am spitzen Ende.
   Dezent (Outline-Optik, gedämpftes Grau) statt des bisherigen Rots.
   ------------------------------------------------------------ */
.tulidu-type-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Mehr Platz links für Spitze + Loch, rechts normaler Innenabstand. */
  padding: 2px 10px 2px 22px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  /* Warmer Sandton („Kofferzettel"): beiger Hintergrund + bräunliche Schrift.
     Die Form entsteht über clip-path; deshalb statt border ein Innen-Schatten als
     feine Kante (eine echte border würde an der schrägen Spitze abgeschnitten). */
  color: #6b5836;
  background: #f3e7cf;
  box-shadow: inset 0 0 0 1px rgba(150, 120, 70, 0.45);
  /* Rechts abgerundet, links zur Spitze zulaufend. */
  border-radius: 3px 11px 11px 3px;
  clip-path: polygon(
    11px 0,        /* obere Kante beginnt nach der Spitze            */
    100% 0,
    100% 100%,
    11px 100%,
    0 50%          /* linke Spitze (Anhänger-Form)                   */
  );
  white-space: nowrap;
  user-select: none;
  /* Leichtes Kippen — wirkt wie ein hängender Gepäckanhänger. */
  transform: rotate(2deg);
  transform-origin: left center;
}

/* Das „Loch" am spitzen Ende des Anhängers. */
.tulidu-type-tag::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mud-palette-surface, #fff);
  box-shadow: 0 0 0 1px rgba(150, 120, 70, 0.7);
}

/* ------------------------------------------------------------
   Item tree (list detail page)

   Approach: every row defines the SAME column template, supplied
   once via the --tulidu-cols custom property on the container. The
   container itself is NOT a grid — each row (and the header) is its
   own independent grid that uses the identical track definition, so
   columns line up across all rows at any nesting depth.

   Why not subgrid / one shared `display: contents` grid: with a
   single shared grid the cells must be *direct* grid items, but
   MudBlazor components emit their own wrapper <div>s, which broke the
   cell-to-track mapping (columns drifted, most visibly on narrow
   screens). With per-row grids sharing one track definition every
   row is a real, self-contained element with guaranteed identical
   column widths — no dependency on subgrid support — and a row can
   render an optional second line locally without disturbing the grid.
   ------------------------------------------------------------ */

.tulidu-tree {
  /* Titel | Status | Priorität | Fällig | Aktionen (ohne Auswahl-Spalte).
     Defined once here and consumed by every row via var(--tulidu-cols).
     The selection column is added by --selectable below. */
  /* Aktionen-Spalte 84px: Platz für „Mein Tag"-Sonnen-Icon + Aktionsmenü (REQ-14-007). */
  --tulidu-cols: minmax(200px, 1fr) minmax(160px, 220px) 130px 120px 84px;
  /* Trennlinie zwischen zwei ITEMS (TO-0025) — bewusst separat von den übrigen, unverändert
     schwachen Innenlinien (Kopfzeile, Spalten-internes). Nutzt MudBlazors LinesInputs statt
     TableLines: gleiche Palette, aber standardmässig kräftiger (rgba(0,0,0,0.23) statt 0.12) und
     trotzdem theme-bewusst (folgt automatisch Light/Dark). Ein einziger Wert an einer Stelle,
     damit sich die Stärke später leicht nachjustieren lässt. */
  --tulidu-item-boundary: var(--mud-palette-lines-inputs, rgba(0, 0, 0, 0.23));
  width: 100%;
  border-top: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
}

/* Batch-Modus: Auswahl-Spalte (40px) vorne einblenden. */
.tulidu-tree--selectable {
  --tulidu-cols: 40px minmax(200px, 1fr) minmax(160px, 220px) 130px 120px 84px;
}

/* Auf mittleren Bildschirmen (< 900px): Priorität + Fällig ausblenden → 3 Spalten (ohne Auswahl). */
@media (max-width: 899px) {
  .tulidu-tree {
    --tulidu-cols: minmax(160px, 1fr) minmax(140px, 200px) 84px;
  }
  .tulidu-tree--selectable {
    --tulidu-cols: 40px minmax(160px, 1fr) minmax(140px, 200px) 84px;
  }
}

/* Auf kleinen Bildschirmen (< 600px): auch Status ausblenden → 2 Spalten (ohne Auswahl). */
@media (max-width: 599px) {
  .tulidu-tree {
    --tulidu-cols: minmax(120px, 1fr) 84px;
  }
  .tulidu-tree--selectable {
    --tulidu-cols: 40px minmax(120px, 1fr) 84px;
  }
}

/* Each row is an independent grid using the shared column template,
   so all rows align identically regardless of nesting depth.
   width:100% is required: a grid container otherwise shrinks to its
   content, leaving no free space for the 1fr title track to expand
   into — which made rows narrower than the list and broke alignment.

   background + margin-top (TO-0025): jedes Item bekommt einen sehr dezenten, EINHEITLICHEN
   Farbton (keine Abwechslung/Zebra — das erste Zwischenergebnis mit alternierender Bänderung
   wirkte gerade durch den Kontrast zwischen den Bändern zu auffällig) plus etwas Abstand zum
   vorherigen Item. Gilt für JEDE Zeile unabhängig von der Tiefe, nicht nur für Wurzel-Items —
   auch Einträge in Unterlisten sollen sich klar voneinander abheben. Zusammen ergibt Farbton +
   Lücke ein „Insel"-Gefühl je Item, ohne dass Nachbar-Items optisch ineinanderlaufen. */
.tulidu-tree-row {
  display: grid;
  grid-template-columns: var(--tulidu-cols);
  align-items: center;
  width: 100%;
  background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
  margin-top: 6px;
}

/* Sichtbarer Fokus für die Tastatur-Navigation im Baum (TO-0013, tulido.itemNav in app.js).
   Zeile und Zelle sind reine Container ohne eigenes natives Fokus-Aussehen — ohne diese Regel
   sähe ein sehender Tastaturbenutzer nicht, wo er sich befindet (WCAG 2.4.7).

   :focus-visible statt :focus mit Absicht: beide tragen tabindex="-1" (die Zeile ausser der
   einen Roving-Zeile), und ein Element mit tabindex="-1" nimmt bei einem MAUSKLICK trotzdem
   den Fokus an — mit :focus bliebe nach jedem Klick in die Liste ein Rahmen stehen. Da der
   Fokus hier immer aus einem laufenden keydown-Handler heraus gesetzt wird, werten Chrome und
   Firefox ihn als tastaturbedingt und wenden :focus-visible an.

   outline-offset negativ: die Zeile spannt die volle Listenbreite, ein aussenliegender Rahmen
   würde am Rand abgeschnitten. */
.tulidu-tree-row:focus-visible,
.tulidu-tree-cell:focus-visible,
.tulidu-tree-secondary-item:focus-visible,
.tulidu-tree-bandcell:focus-visible {
  outline: 2px solid var(--mud-palette-primary, #594ae2);
  outline-offset: -2px;
  border-radius: 2px;
}

/* The header uses the same shared column template.
   align-items:stretch (statt center) lässt alle Kopf-Zellen die volle Zeilenhöhe
   einnehmen — sonst kollabiert die „Aktionen"-Zelle (nur out-of-flow .sr-only-Inhalt)
   auf reine Padding-Höhe und ihr border-bottom säße höher als bei den Text-Zellen. */
.tulidu-tree-headrow {
  display: grid;
  grid-template-columns: var(--tulidu-cols);
  align-items: stretch;
  width: 100%;
}

/* Header row cells. Flex, damit der Text trotz stretch vertikal zentriert bleibt;
   die border-bottom aller Zellen liegt dadurch auf einer Höhe. */
.tulidu-tree-head {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  padding: 8px;
  border-bottom: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
}

/* Body cells. The row-bottom border is drawn on each cell so it spans
   the full grid width even though there is no real <tr> element. */
.tulidu-tree-cell {
  padding: 3px 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tulidu-item-boundary);
  overflow: hidden;
  /* A grid item's default min-width is `auto`, so a long non-wrapping title
     would force the title cell wider than its 1fr track and push the
     following columns out of alignment (rows with truncated titles drifted
     while short-title rows stayed put). min-width:0 lets the cell shrink to
     its track width and the title truncate with the ellipsis instead. */
  min-width: 0;
}

/* Row carries a quick-actions bar (see .tulidu-tree-quickactions below) as its very last
   visual element — the border-bottom that normally closes the row moves there, so the row
   doesn't draw a double line above the bar. Mirrors the existing has-secondary/md pattern. */
.tulidu-tree-row--has-quickactions .tulidu-tree-cell,
.tulidu-tree-row--has-quickactions .tulidu-tree-secondary {
  border-bottom: none;
}

/* MudText/MudTypography (z.B. Priorität „Hoch", Fälligkeitsdatum) bringt von Haus aus
   Material-Typografie-Margins mit (margin-top/-bottom auf dem <p>). Diese blähten die
   betroffenen Zellen über die 32px-Zeilenhöhe hinaus, sodass deren border-bottom tiefer
   sass als bei Nachbarzellen ohne Text → die Trennlinie „fiel auseinander" (sichtbar v.a.
   in der Prioritäts-Spalte). Margin hier neutralisieren, damit alle Zellen gleich hoch sind. */
.tulidu-tree-cell .mud-typography {
  margin: 0;
  line-height: 1.2;
}

/* When the secondary line is actually visible (see breakpoints below),
   the primary cells must not draw their own bottom border — the border
   belongs to the secondary line so the whole row reads as one band.
   Coupled to breakpoint visibility so a row never loses its border at a
   width where the secondary line is hidden. */

/* Select cell (bulk checkbox) — compact, centred. */
.tulidu-tree-cell--select {
  justify-content: center;
  padding: 4px;
}

/* Title cell holds the expander, checkbox, title and (below) description,
   so it stacks vertically. */
.tulidu-tree-cell--title {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.tulidu-tree-title-line {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* Sublisten-Navigations-Icon: auf Pointer-Geräten (Maus) erst beim Hover sichtbar,
   damit es das Layout im Ruhezustand nicht überfüllt. Auf Touch-Geräten und bei
   Tastaturfokus immer sichtbar — hover ist dort nicht zuverlässig auslösbar.
   Das Icon bleibt im DOM (nicht display:none / visibility:hidden), damit Screen
   Reader und Tastaturnutzer es immer erreichen. opacity:0 allein wäre ein A11y-
   Verstoß (fokussierbar aber unsichtbar) — deshalb zusätzlich pointer-events:none
   im Ruhezustand und voller opacity bei :focus-visible. */
.tulidu-tree-sublist-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  padding: 2px;
  line-height: 0;   /* verhindert Extra-Höhe durch den <a>-Inline-Kontext */
}

/* Auf Nicht-Folder-Rows: Icon vollständig ausblenden, aus Tab-Reihenfolge entfernt via tabindex=-1 */
.tulidu-tree-sublist-link--hidden {
  display: none;
}

/* Maus-Gerät: im Ruhezustand ausblenden */
@media (hover: hover) and (pointer: fine) {
  .tulidu-tree-sublist-link {
    opacity: 0;
    transition: opacity 0.15s;
  }
  .tulidu-tree-row:hover .tulidu-tree-sublist-link {
    opacity: 0.6;
  }
}

/* Tastaturfokus: immer sichtbar mit Fokusring — gilt auf allen Geräten */
.tulidu-tree-sublist-link:focus-visible {
  opacity: 1 !important;
}

/* ── Tag-Icon (REQ-14-003) ──────────────────────────────────────────────
   Kleines LocalOffer-Icon direkt nach dem Titeltext. Grau ohne Tags,
   sandgelb (#BA7517) wenn Tags vorhanden. Auf Maus-Geräten im Ruhezustand
   halb-transparent; Tastatur: immer voll sichtbar bei :focus-visible. */
.tulidu-tree-tag-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--mud-palette-text-disabled);
  cursor: pointer;
  line-height: 0;
  border-radius: 2px;
}

.tulidu-tree-tag-icon--active {
  color: #BA7517;
}

@media (hover: hover) and (pointer: fine) {
  .tulidu-tree-tag-icon {
    opacity: 0.35;
    transition: opacity 0.15s;
  }
  .tulidu-tree-row:hover .tulidu-tree-tag-icon {
    opacity: 0.7;
  }
  .tulidu-tree-tag-icon--active {
    opacity: 0.75;
  }
  .tulidu-tree-row:hover .tulidu-tree-tag-icon--active {
    opacity: 1;
  }
}

.tulidu-tree-tag-icon:focus-visible {
  opacity: 1 !important;
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Zähler neben dem Etikett-Icon: zeigt die Anzahl zugewiesener Tags als
   kleine hochgestellte Zahl in derselben Farbe wie das Icon. */
.tulidu-tag-icon-count {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  align-self: flex-start;
  margin-top: 1px;
  margin-left: 1px;
  color: inherit;
  letter-spacing: 0;
}

/* Freigabe-Kennzeichnung (UX-Verfeinerung REQ-04-008): grün = von mir geteilt,
   orange = mit mir geteilt. box-shadow: inset statt border-left, da .tulidu-tree-row
   Teil des CSS-Grid ist und ein border die Zeilenbreite verändern und die dokumentierte
   Spaltenausrichtung gefährden würde (s. ItemRow.razor.cs). */
.tulidu-share-indicator--by-me {
  box-shadow: inset 4px 0 0 #2e7d32;
}

.tulidu-share-indicator--with-me {
  box-shadow: inset 4px 0 0 #f57c00;
}

.tulidu-share-indicator-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ── Umsortieren per Drag & Drop (REQ-03-006) ────────────────────────────
   Nur bei „Standard"-Sortierung sinnvoll/verfügbar (s. ListDetailViewModel.
   IsDragDropAvailable) — der zugehörige Griff wird in ItemRow ohnehin nur
   dann gerendert. Drop-Zonen als box-shadow: inset (wie die Freigabe-
   Kennzeichnung) statt border/Hintergrund, damit weder Zeilenbreite noch
   -höhe sich ändern und die dokumentierte Spaltenausrichtung intakt bleibt. */

/* Fixed-width slot for the drag handle, analog to .tulidu-tree-done — the
   title text must start at the same x whether or not the handle is shown. */
.tulidu-tree-drag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.tulidu-tree-drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--mud-palette-text-disabled);
  cursor: grab;
  line-height: 0;
  opacity: 0.45;
}

.tulidu-tree-row:hover .tulidu-tree-drag-handle {
  opacity: 0.8;
}

.tulidu-tree-drag-handle:active {
  cursor: grabbing;
}

/* The row currently being dragged — dimmed so the drop target underneath reads clearly. */
.tulidu-tree-row--dragging {
  opacity: 0.4;
}

/* Drop indicators — shown on the row currently under the pointer while dragging.
   Blue (distinct from the green/orange share indicators) so the two meanings never clash. */
.tulidu-tree-row--drop-before {
  box-shadow: inset 0 3px 0 0 #1976d2;
}

.tulidu-tree-row--drop-after {
  box-shadow: inset 0 -3px 0 0 #1976d2;
}

.tulidu-tree-row--drop-into {
  box-shadow: inset 0 0 0 2px #1976d2;
  background-color: rgba(25, 118, 210, 0.06);
}

/* Fixed-width slot for the done-checkbox so the title text always starts
   at the same x position, independent of the MudCheckBox wrapper width. */
.tulidu-tree-done {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
}

/* MudCheckBox has internal padding (Material touch target) that inflates
   the row height. Strip it so the checkbox sits flush in the compact row. */
.tulidu-tree-done .mud-button-root {
  padding: 0 !important;
}

/* Optimistisches Feedback für den Done-Checkbox-Klick (gefühlte Geschwindigkeit bei
   langsamer/mobiler Verbindung): tulido.optimistic (app.js) setzt diese Klasse rein
   clientseitig, SOFORT beim Klick, ohne auf die Server-Antwort zu warten — und hebt
   sie wieder auf, sobald der Roundtrip abgeschlossen ist (ItemRow.razor.cs) oder nach
   einem Sicherheits-Timeout. pointer-events: none verhindert dabei genau die Doppel-
   Bedienung, die während der Wartezeit sonst provoziert würde. Bewusst kein optimistisch
   vorweggenommener Checked-Zustand (MudCheckBox rendert intern per SVG/Blazor-State —
   ein visuell "vorgetäuschtes" Häkchen könnte bei einem Fehlschlag falsch stehen bleiben);
   stattdessen nur ein neutrales "wird bearbeitet"-Signal. */
.tulidu-tree-row--pending .tulidu-tree-done {
  pointer-events: none;
  animation: tulidu-pending-pulse 1s ease-in-out infinite;
}

@keyframes tulidu-pending-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .tulidu-tree-row--pending .tulidu-tree-done {
    animation: none;
    opacity: 0.5;
  }
}

.tulidu-tree-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* flex: 1 1 auto entfernt — der Text soll nur so breit sein wie nötig,
     damit das Sublisten-Icon direkt dahinter sitzt statt am rechten Rand.
     min-width:0 bleibt damit text-overflow:ellipsis greift. */
  min-width: 0;
  flex: 0 1 auto;
}

.tulidu-tree-title-text--done {
  text-decoration: line-through;
  color: var(--mud-palette-text-secondary);
}

.tulidu-tree-desc {
  font-style: italic;
  font-size: 0.8em;
  color: var(--mud-palette-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions cell aligns its menu button to the right.
   padding-top/bottom: 0 — the icon-button is 26px and fits in the 32px row
   without extra vertical padding. */
.tulidu-tree-cell--actions {
  justify-content: center;
  padding: 0 4px;
}

/* MudChip default margin (4px) inflates the status cell beyond the 32px row
   height (3px cell-padding + 4px chip-margin + 24px chip + 4px + 3px = 38px).
   Strip the vertical margin so the chip stays within the compact row. */
.tulidu-tree-cell .mud-chip {
  margin: 0;
}

/* Sub-list (folder) rows get a slightly heavier title. */
.tulidu-tree-row--folder .tulidu-tree-title-text {
  font-weight: 600;
}

/* Folder title cell is clickable to expand/collapse — show pointer cursor. */
.tulidu-tree-cell--title-folder {
  cursor: pointer;
  user-select: none;
}

/* ------------------------------------------------------------
   Secondary line (mobile / narrow screens)
   When columns are hidden by the media queries, their content is
   shown here instead, on a second line. It starts at the title
   column (grid-column 2), i.e. aligned under the title and indented
   past the selection checkbox — not flush to the far left. Runs to
   the end of the row. Hidden by default; revealed per breakpoint.
   ------------------------------------------------------------ */
.tulidu-tree-secondary {
  display: none; /* shown only when there is hidden content to surface */
  grid-column: 1 / -1; /* spans full row; left indent via inline padding-left from ItemRow */
  padding: 0 8px 4px 8px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--tulidu-item-boundary);
}

.tulidu-tree-secondary-item {
  font-size: 0.8em;
  color: var(--mud-palette-text-secondary);
}

/* ------------------------------------------------------------
   Schnellzugriffs-Icon-Leiste (Sichtbarkeit der Zeilen-Bedienelemente)
   Eigene Zeile unter jedem Item, unabhängig von der Bildschirmbreite (kein Breakpoint-Gating
   wie bei .tulidu-tree-secondary) — sichtbar sobald mindestens ein Schalter oberhalb der
   Sortierzeile aktiv ist (s. ItemRow.razor: HasQuickActions). Übernimmt als letztes Element
   der Zeile deren unteren Trennstrich, s. .tulidu-tree-row--has-quickactions oben.
   ------------------------------------------------------------ */
.tulidu-tree-quickactions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 4px 8px;
  border-bottom: 1px solid var(--tulidu-item-boundary);
}

/* Sublisten-Icon in der Schnellzugriffsleiste ist ein <a>, kein MudIconButton (echte
   Navigation) — an Grösse/Innenabstand der MudIconButton-Nachbarn angeglichen. */
.tulidu-tree-quickaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: inherit;
  text-decoration: none;
  border-radius: 50%;
}

.tulidu-tree-quickaction-btn:hover,
.tulidu-tree-quickaction-btn:focus-visible {
  background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

/* Umsortieren-Block (Nach oben/unten verschieben, Einrücken, Ausrücken): optisch als
   zusammengehörige Gruppe abgesetzt — linke Trennlinie + etwas Abstand zu den Einzelaktionen. */
.tulidu-tree-quickaction-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
}

/* Zellen-Wrapper der zeilenbreiten Bänder (TO-0013): jedes Schnellzugriffs-Icon ist eine eigene
   `role="gridcell"`, damit die Pfeiltasten-Navigation dort genauso greift wie in den Spalten
   (Begründung s. Kopfkommentar von ItemRow.razor).

   `display: inline-flex` ist Pflicht und nicht bloss Kosmetik: `display: contents` — sonst der
   naheliegende Weg für einen reinen Struktur-Wrapper — nimmt dem Element die Box und damit
   browserweit die Fokussierbarkeit (dieselbe Falle wie bei MudBlazors .mud-menu-activator,
   s. CLAUDE.md). Der Wrapper muss fokussierbar bleiben, sonst ist die ganze Umstellung wirkungslos.
   Ohne eigene Abstände, damit das gap der Leiste die Abstände weiterhin allein bestimmt. */
.tulidu-tree-bandcell {
  display: inline-flex;
  align-items: center;
}

/* Responsive: hide header and body cells on small/medium screens.
   These classes mirror the media-query breakpoints above so the
   column count in the grid and the visible cells always match. */

/* Status column: visible by default, hidden < 600px (small). */
.tulidu-tree-cell--hide-sm,
.tulidu-tree-head--hide-sm {
  display: flex; /* visible by default */
}

/* Priorität + Fällig columns: visible by default, hidden < 900px (medium). */
.tulidu-tree-cell--hide-md,
.tulidu-tree-head--hide-md {
  display: flex; /* visible by default */
}

/* Secondary-line items only show the metadata that the current
   breakpoint has hidden from the columns. */
.tulidu-tree-secondary-item--md,
.tulidu-tree-secondary-item--sm {
  display: none;
}

/* < 900px (medium): Priorität + Fällig leave the columns and appear
   in the secondary line. Only rows that actually have md-content carry
   the `--md` class, so no empty band appears. */
@media (max-width: 899px) {
  .tulidu-tree-cell--hide-md,
  .tulidu-tree-head--hide-md {
    display: none;
  }

  .tulidu-tree-secondary--md {
    display: flex;
  }

  .tulidu-tree-secondary-item--md {
    display: inline-flex;
  }

  /* Md-secondary band is visible here → its cells hand the bottom border
     to the band so the row reads as one. */
  .tulidu-tree-row--has-secondary:has(.tulidu-tree-secondary--md) .tulidu-tree-cell {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   SortBar — horizontale Sortierleiste
   ------------------------------------------------------------ */

.tulidu-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding: 2px 0;
}

/* Sichtbarkeits-Schalter für Zeilen-Bedienelemente (Navigation/Kommentare/Untereintrag/
   Bearbeiten/Löschen), oberhalb der Sortierzeile. Teilt das Label-Aussehen mit .tulidu-sort-bar. */
.tulidu-row-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px 0;
}

/* Aktiver Zustand der Sichtbarkeits-Schalter oberhalb der Sortierzeile: MudToggleIconButton
   ändert im Toggled-Zustand nur die Icon-Farbe (ToggledColor) — auf einen Blick zu unauffällig.
   Ergänzt einen deutlich sichtbaren, gefüllten Kreis-Hintergrund, analog zu Material „selected
   icon button". Wird zusammen mit aria-pressed gesetzt (s. ItemTree.razor). */
.tulidu-row-controls-btn--active {
  background-color: var(--mud-palette-primary, #594AE2) !important;
}

.tulidu-row-controls-btn--active .mud-icon-root {
  color: var(--mud-palette-primary-text, #fff) !important;
}

.tulidu-sort-label {
  font-size: 0.78rem;
  color: var(--mud-palette-text-secondary);
  margin-right: 2px;
  white-space: nowrap;
}

.tulidu-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 12px;
  background: transparent;
  color: var(--mud-palette-text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tulidu-sort-btn:hover,
.tulidu-sort-btn:focus-visible {
  background: var(--mud-palette-background-grey);
  border-color: var(--mud-palette-primary);
  outline: none;
}

.tulidu-sort-btn--active {
  background: var(--mud-palette-primary);
  border-color: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  font-weight: 600;
}

.tulidu-sort-btn--active:hover,
.tulidu-sort-btn--active:focus-visible {
  background: var(--mud-palette-primary-darken);
  border-color: var(--mud-palette-primary-darken);
}

.tulidu-sort-btn--reset {
  padding: 2px 6px;
  font-size: 0.72rem;
  opacity: 0.65;
}

/* < 600px (small): Status additionally leaves its column and joins
   the secondary line. Status-only rows reveal their band here (they
   carry `--smonly` instead of `--md`). */
@media (max-width: 599px) {
  .tulidu-tree-cell--hide-sm,
  .tulidu-tree-head--hide-sm {
    display: none;
  }

  .tulidu-tree-secondary--smonly {
    display: flex;
  }

  .tulidu-tree-secondary-item--sm {
    display: inline-flex;
  }

  /* < 600px: any visible secondary band (md or smonly) takes the border. */
  .tulidu-tree-row--has-secondary:has(.tulidu-tree-secondary) .tulidu-tree-cell {
    border-bottom: none;
  }
}

/* ────────────────────────────────────────────────────────────
   DueItemRow — flache, read-only Zeile der Fälligkeitsübersicht
   auf der Home-Seite. Anders als der Baum (.tulidu-tree-*) keine
   Spaltenausrichtung über Zeilen hinweg: eine kompakte Karte je Item.

   Hintergrundton + Radius (TO-0025, gleiches Muster wie .tulidu-tree-row): jedes Item bekommt
   denselben sehr dezenten, einheitlichen Farbton wie im Item-Baum — dieselbe Variable, damit
   Baum und flache Listen (Home/Mein Tag/Tag-Filter) optisch konsistent bleiben. Passt hier sogar
   noch besser zum bestehenden „Karte je Item"-Konzept (s. Kommentar oben) als im Baum, da bereits
   abgerundete Ecken sinnvoll sind. Whitespace zwischen Items kommt weiterhin vom bestehenden
   `<MudDivider Class="my-2">` in Home/MyDay/TagFilter.razor (dort ebenfalls von my-1 auf my-2
   angehoben, analog zum 6px margin-top im Baum) — der Divider selbst bleibt in der
   MudBlazor-Standardfarbe, keine Übernahme von --tulidu-item-boundary hier (liesse sich ohne
   Zugriff auf die kompilierte MudBlazor.dll nicht gegen die tatsächliche Divider-Klasse
   verifizieren, s. CLAUDE.md „MudBlazor 9" — Komponenten-Klassennamen vor Verwendung prüfen). */
.tulidu-due-row {
  padding: 6px 8px;
  background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
  border-radius: 6px;
}

/* Hauptzeile: Titel (flexibel) + Metadaten (Datum, Priorität) rechts. */
.tulidu-due-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ────────────────────────────────────────────────────────────
   Umsortieren in „Mein Tag" (TO-0024) — Ziehgriff + Drop-Indikatoren, analog
   .tulidu-tree-drag-handle/--dragging/--drop-before/--drop-after, aber für die
   Karten-Zeile hier statt das Grid-Layout des Baums. Eigene Klassen (kein Teilen mit
   .tulidu-tree-*), da tulido.myDayDnd bewusst ein eigenständiges JS-Modul ist. */
.tulidu-due-row__drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--mud-palette-text-disabled);
  cursor: grab;
  line-height: 0;
  opacity: 0.45;
}

.tulidu-due-row--reorderable:hover .tulidu-due-row__drag-handle {
  opacity: 0.8;
}

.tulidu-due-row__drag-handle:active {
  cursor: grabbing;
}

.tulidu-due-row__reorder-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Die gezogene Zeile — gedimmt, damit das Ziel darunter deutlich lesbar bleibt. */
.tulidu-due-row--dragging {
  opacity: 0.4;
}

/* Drop-Indikatoren — dieselbe Farbe wie im Item-Baum (s. .tulidu-tree-row--drop-*), damit
   „hier wird eingefügt" in der ganzen Anwendung einheitlich aussieht. */
.tulidu-due-row--drop-before {
  box-shadow: inset 0 3px 0 0 #1976d2;
}

.tulidu-due-row--drop-after {
  box-shadow: inset 0 -3px 0 0 #1976d2;
}

.tulidu-due-row__title {
  flex: 1 1 auto;
  min-width: 0;            /* erlaubt Ellipsis statt Überlauf */
  font-weight: 600;
}

.tulidu-due-row__date {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.tulidu-due-row__date-icon {
  flex: 0 0 auto;
}

/* „Erledigt"-Kurzweg-Checkbox — analog .tulidu-tree-done: MudCheckBox bringt eigenes
   Material-Touch-Target-Padding mit, das die kompakte Kartenzeile sonst unnötig aufbläht. */
.tulidu-due-row__done .mud-button-root {
  padding: 0 !important;
}

.tulidu-due-row__priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;    /* fester Slot — hält das Datum zeilenübergreifend ausgerichtet */
  flex: 0 0 20px;
}

/* Breadcrumb-Zeile: kleiner, gedämpft (dezentes Grau), unter dem Titel.
   Bewusst farblich zurückhaltend, damit sie nicht vom Item-Titel ablenkt. */
.tulidu-due-row__breadcrumb {
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  color: var(--mud-palette-text-secondary);
}

.tulidu-due-row__breadcrumb-link {
  color: var(--mud-palette-text-secondary) !important;
}

.tulidu-due-row__breadcrumb-sep {
  opacity: 0.6;
  user-select: none;
}

/* ────────────────────────────────────────────────────────────
   DatePicker-Popover (DueDateField-Baustein).
   Auf Desktop ankert es am Cursor (PositionAtCursor). Auf schmalen
   Screens würde das 260px breite Popover am rechten Rand abgeschnitten
   — dort zentrieren wir es stattdessen mittig im Viewport.
   MudBlazor setzt die Position inline (top/left) auf dem .mud-popover-
   Element, daher die !important-Overrides; nur unter 600px aktiv.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .tulidu-date-popover.mud-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}

/* ────────────────────────────────────────────────────────────
   Ziel-Item-Hervorhebung: wird per JS gesetzt, wenn der Benutzer
   von der Home-Fälligkeitsübersicht zu einem Item navigiert
   (?highlight={id}). Blasses Grün, über 1,5 s sanft verblassend.
   Kurze Haltephase (~25 %) vor dem Ausklang nimmt die Unruhe;
   ease-in-out sorgt für ein weiches, gleichmässiges Verblassen.
   prefers-reduced-motion: keine Animation, nur kurzer statischer Hint.
   ──────────────────────────────────────────────────────────── */
@keyframes tulidu-highlight-fade {
  0%   { background-color: rgba(76, 175, 80, 0.35); }  /* blasses Grün */
  25%  { background-color: rgba(76, 175, 80, 0.35); }  /* kurz halten */
  100% { background-color: transparent; }
}

.tulidu-row-highlight {
  animation: tulidu-highlight-fade 1.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .tulidu-row-highlight {
    animation: none;
    background-color: rgba(76, 175, 80, 0.20);
  }
}

/* ────────────────────────────────────────────────────────────
   NavMenu-Badge: Anzahl offener Freundschaftsanfragen (REQ-17-002).
   ──────────────────────────────────────────────────────────── */
.tulidu-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 8px;
  border-radius: 9px;
  background-color: #BA7517;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* ────────────────────────────────────────────────────────────
   Rechte-Gating (UX-Verfeinerung REQ-04-008, 0.13.0): disabled
   Buttons/Menüeinträge dezent statt farbig-aber-blass darstellen.
   MudBlazor lässt Disabled-Elemente standardmässig in ihrer ursprünglichen
   Farbe (z.B. rotes Löschen-Icon) nur leicht transparent — das wirkt bei
   berechtigungsbedingt gesperrten Aktionen unruhig/alarmierend, obwohl
   nichts falsch ist. Hier wird die Farbe stattdessen auf den neutralen
   "text-disabled"-Ton der Palette vereinheitlicht.
   Deckt sowohl die native :disabled-Pseudoklasse ab (MudButton/MudIconButton
   rendern ein echtes <button>-Element) als auch die .mud-disabled-Klasse
   (MudMenuItem ist kein natives Formularelement, MudBlazor markiert den
   deaktivierten Zustand dort über eine CSS-Klasse statt des Attributs).
   ──────────────────────────────────────────────────────────── */
.mud-icon-button:disabled,
.mud-icon-button.mud-disabled,
.mud-button-root:disabled,
.mud-button-root.mud-disabled,
.mud-menu-item.mud-disabled,
.mud-menu-item:disabled {
  color: var(--mud-palette-text-disabled) !important;
  opacity: 0.6;
}

.mud-icon-button:disabled .mud-icon-root,
.mud-icon-button.mud-disabled .mud-icon-root,
.mud-button-root:disabled .mud-icon-root,
.mud-button-root.mud-disabled .mud-icon-root,
.mud-menu-item.mud-disabled .mud-icon-root,
.mud-menu-item:disabled .mud-icon-root {
  color: var(--mud-palette-text-disabled) !important;
}

/* ────────────────────────────────────────────────────────────
   Benachrichtigungen (REQ-04-009): ungelesene Zeile leicht abgesetzt,
   die Nachricht selbst ist ein natives <button> (statt MudLink — dessen
   OnClick-Unterstützung ist nicht zuverlässig, ein natives Element ist
   ausserdem per Default tastaturbedienbar), optisch aber wie ein Link.
   ──────────────────────────────────────────────────────────── */
.tulidu-notification--unread {
  background-color: var(--mud-palette-action-default-hover);
}

.tulidu-notification-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--mud-palette-primary);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.tulidu-notification-link:hover,
.tulidu-notification-link:focus-visible {
  text-decoration: none;
}

/* ────────────────────────────────────────────────────────────
   Kommentare (REQ-03-017)
   Volle Bearbeitungsansicht: CommentSection/CommentItem (nur Listendetail,
   im CommentDialog). Read-only Vorschau: CommentBadge (überall sonst).
   Reaktions-Buttons sind native <button> statt MudButton — brauchen
   individuelles Padding/Layout, das mit MudButtons Innenabständen
   kollidieren würde; nativ bleiben sie trotzdem per Default fokussierbar
   und per Tastatur bedienbar.
   ──────────────────────────────────────────────────────────── */

.tulidu-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tulidu-comments-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.tulidu-comment-compose,
.tulidu-comment-edit,
.tulidu-comment-reply-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tulidu-comment-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.tulidu-comment-list,
.tulidu-comment-replies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tulidu-comment-replies {
  margin-top: 8px;
  margin-left: 24px;
  padding-left: 12px;
  border-left: 2px solid var(--mud-palette-lines-default);
}

.tulidu-comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mud-palette-background-grey);
}

.tulidu-comment--reply {
  background: var(--mud-palette-surface);
}

.tulidu-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tulidu-comment-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tulidu-comment-author {
  font-weight: 600;
}

.tulidu-comment-timestamp {
  font-size: 0.8rem;
  color: rgb(150, 150, 150);
}

.tulidu-comment-content {
  overflow-wrap: break-word;
}

.tulidu-comment-content p {
  margin: 0 0 8px 0;
}

.tulidu-comment-content p:last-child {
  margin-bottom: 0;
}

.tulidu-comment-content ul,
.tulidu-comment-content ol {
  margin: 0 0 8px 0;
  padding-left: 24px;
}

.tulidu-comment-content blockquote {
  margin: 0 0 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--mud-palette-lines-default);
  color: rgb(110, 110, 110);
}

.tulidu-comment-content code {
  background: var(--mud-palette-background-grey);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: monospace;
}

/* Kommentar-Bilder (REQ-03-017): begrenzt, damit ein grosses Foto nicht die
   ganze Kommentarspalte sprengt — Klick öffnet die Originalgrösse in einem
   neuen Tab (natives Verhalten von <img> in <a>, hier bewusst ohne Link-
   Wrapper: das Bild selbst ist bereits über seine src erreichbar). */
.tulidu-comment-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
  display: block;
  margin: 4px 0;
}

.tulidu-mention {
  background: var(--mud-palette-primary-hover);
  color: var(--mud-palette-primary);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

.tulidu-comment-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tulidu-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  color: inherit;
}

.tulidu-reaction-btn:hover,
.tulidu-reaction-btn:focus-visible {
  background: var(--mud-palette-action-default-hover);
}

.tulidu-reaction-btn--active {
  background: var(--mud-palette-primary-hover);
  border-color: var(--mud-palette-primary);
}

/* ────────────────────────────────────────────────────────────
   CommentBadge (REQ-03-017): kompaktes, überall einsetzbares
   Kennzeichen ausserhalb der Listendetail-Ansicht.
   ──────────────────────────────────────────────────────────── */

.tulidu-comment-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: inherit;
}

.tulidu-comment-badge-count {
  font-size: 0.75rem;
  font-weight: 600;
}

.tulidu-comment-badge-tooltip {
  max-width: 320px;
}

.tulidu-comment-badge-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.tulidu-comment-badge-preview-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}