/* ============================================================
   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. (Planned for UX P2.) */
.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;
}

/* ------------------------------------------------------------
   Item tree (list detail page)
   A CSS grid renders the recursive item tree with stable column
   alignment at any nesting depth. Each row wrapper uses
   `display: contents` so its cells become direct children of the
   single grid, keeping every column lined up regardless of how
   deep the row sits in the tree.
   ------------------------------------------------------------ */

.tulidu-tree {
  display: grid;
  /* Titel | Status | Priorität | Fällig | Aktionen */
  grid-template-columns: minmax(240px, 1fr) 220px 140px 140px 56px;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
}

/* Each row's cells participate directly in the parent grid. */
.tulidu-tree-row {
  display: contents;
}

/* Header row cells. */
.tulidu-tree-head {
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  padding: 12px 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: 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.12));
  overflow: hidden;
}

/* 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: 2px;
}

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

.tulidu-tree-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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. */
.tulidu-tree-cell--actions {
  justify-content: center;
  padding: 4px;
}

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