/**
 * checklisten.css - Modul-Styles Checklisten (Übersicht + Punkte-Editor).
 *
 * Generische Listen-Patterns kommen aus _shared/functions/list-view/grid-css/.
 * Dieses File enthält nur Checklisten-Spezifisches: Spaltenbreiten,
 * Fortschrittsbalken, uebersprungen-Status, Kopf-Formular-Feinheiten.
 * Farben/Schriften ausschließlich über Tokens (var(--…)).
 *
 * Naming:
 *  .cl-* = Checklisten-Liste (Übersicht)
 *  .cp-* = Checklisten-Punkte (Editor)
 */

/* ================================================================ */
/* Liste - Grid: Spaltenbreiten                                      */
/* ================================================================ */

.cl-grid {
  /* Drag · Titel · Kategorie · Fortschritt · Vorlage · Duplizieren ·
     Archiv · Löschen. Breiten aus der col-resize-CSS-Variable;
     Fallback = Defaults (Reihenfolge muss zu attachColResize passen). */
  display: grid;
  grid-template-columns: var(--cl-cols,
    44px minmax(220px, 1.6fr) 160px 200px 44px 44px 44px 44px);
  align-items: stretch;
  gap: 0;
}

.cl-rows .cl-row .cl-cell-titel {
  font-weight: 500;
  min-width: 0;
}
.cl-rows .cl-row .cl-cell-titel.is-empty {
  font-style: italic;
  color: var(--mid, #555);
  font-weight: 400;
}
.cl-rows .cl-row .cl-cell-kategorie { color: var(--mid, #555); }
.cl-rows .cl-row .cl-cell-kategorie.is-set { color: var(--ink, #111); }

/* Titel-Group: Text + Pen nehmen nur natürliche Breite (Pen-Hover-Trigger
   ist der Text-Bereich, nicht die ganze Cell) - Muster Protokolle. */
.cl-rows .cl-row .cl-cell-titel .cl-titel-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.cl-rows .cl-row .cl-cell-titel .cl-titel-group.is-editing {
  flex: 1 1 auto;
  width: 100%;
}
.cl-rows .cl-row .cl-titel-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ausgeblendeter Kategorie-Filter im Preset-Modus (Netzwerk-Wrapper). */
.cl-bar .idf-list-filter.is-hidden { display: none; }

/* Hover-Stufe der Action-Icons (Shared-Klassen, modul-eigener Row-Anker). */
.cl-rows .cl-row:hover .idf-list-drag-handle,
.cl-rows .cl-row:hover .idf-list-delete-btn { opacity: 0.6; }

.cl-thead .cl-cell-drag i {
  color: var(--mid, #555);
  opacity: 0.7;
  font-size: 14px;
}
.cl-thead .cl-cell-drag.is-sorted i {
  color: var(--accent, #167ea0);
  opacity: 1;
}

/* Archivierte Zeilen (nur in der Archiv-Ansicht sichtbar) gedimmt. */
.cl-rows .cl-row.is-archiviert { opacity: 0.65; }

/* ================================================================ */
/* Liste - Fortschrittsbalken                                        */
/* ================================================================ */

.cl-cell-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cl-progress-track {
  flex: 1 1 auto;
  height: 6px;
  min-width: 40px;
  border-radius: 3px;
  background: var(--line, #e5e5e5);
  overflow: hidden;
}
.cl-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #167ea0);
}
.cl-progress-text {
  flex: 0 0 auto;
  font-size: var(--font-sm);
  color: var(--mid, #555);
  font-variant-numeric: tabular-nums;
}
.cl-progress-empty {
  font-size: var(--font-sm);
  color: var(--soft, #999);
  font-style: italic;
}

/* ================================================================ */
/* Punkte-Editor - Kopf (Kategorie / Vorlage / Beschreibung)         */
/* ================================================================ */

.cp-kopf {
  padding: 0 32px 8px;
}
.cp-kopf-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.cp-kopf-fields > label,
.cp-kopf-fields > .cp-kopf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}
.cp-kopf-fields > .cp-kopf-field.is-grow { flex: 1 1 320px; }
.cp-kopf-fields span {
  font-size: var(--font-xs);
  color: var(--mid, #555);
}
/* Kein lokaler Textarea-Skin: Höhe, Padding, Border und `resize: vertical`
   liefert idf-forms.css für `.idf-form > label textarea` (die Beschreibung
   sitzt deshalb in einem <label>, nicht in einem <div>). */

/* ================================================================ */
/* Punkte-Editor - Grid: Spaltenbreiten                              */
/* ================================================================ */

.cp-grid {
  /* Drag · Erledigt · Text · Termin · Verantwortlich · Notiz · Löschen.
     Breiten via col-resize-Variable, Fallback = Defaults. */
  display: grid;
  grid-template-columns: var(--cp-cols,
    44px 52px minmax(220px, 1.6fr) 170px 200px minmax(160px, 1fr) 44px);
  align-items: stretch;
  gap: 0;
}

.cp-rows .cp-row .cp-cell-titel {
  font-weight: 500;
  min-width: 0;
  display: flex;
  align-items: center;
}
.cp-rows .cp-row .cp-cell-termin { font-variant-numeric: tabular-nums; }
.cp-rows .cp-row .cp-cell-verant,
.cp-rows .cp-row .cp-cell-notiz { color: var(--mid, #555); }

.cp-rows .cp-row .cp-cell-titel .cp-titel-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.cp-rows .cp-row .cp-cell-titel .cp-titel-group.is-editing {
  flex: 1 1 auto;
  width: 100%;
}
.cp-rows .cp-row .cp-titel-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-rows .cp-row:hover .idf-list-drag-handle,
.cp-rows .cp-row:hover .idf-list-done-pill,
.cp-rows .cp-row:hover .idf-list-delete-btn { opacity: 0.6; }

.cp-thead .cp-cell-drag i {
  color: var(--mid, #555);
  opacity: 0.7;
  font-size: 14px;
}
.cp-thead .cp-cell-drag.is-sorted i {
  color: var(--accent, #167ea0);
  opacity: 1;
}

/* Erledigt: gedimmt + durchgestrichen (Shared-Konvention). */
.cp-rows .cp-row.is-erledigt { opacity: 0.55; }
.cp-rows .cp-row.is-erledigt .cp-titel-text { text-decoration: line-through; }

/* Übersprungen: gedimmt + kursiv, KEIN Durchstreichen (bewusst nicht
   erledigt, aber abgearbeitet). Label neben dem Text. */
.cp-rows .cp-row.is-uebersprungen { opacity: 0.6; }
.cp-rows .cp-row.is-uebersprungen .cp-titel-text { font-style: italic; }
.cp-skipped-label {
  flex: 0 0 auto;
  font-size: var(--font-xs);
  color: var(--soft, #999);
  font-style: italic;
}

/* Baum-Linien: stehen im Shared-Baustein
   `_shared/functions/list-view/tree/idf-list-tree.css` und nirgends sonst
   (#701). Dieses Modul rendert nur `.idf-tree-cell` an der Titel-Zelle und
   `.idf-tree-connector` als deren erstes Kind.

   Mit dem Umzug hat sich hier zweierlei GEAENDERT: die Einrueckung geht von
   36/60 auf 22/44 px und der Connector von 14 auf 12 px Breite - beides jetzt
   die Werte, die Aufgaben, Protokolle und die App-Hilfe schon hatten. Genau
   diese Abweichung war der Grund, warum ueber Baum-Linien immer wieder neu
   geredet wurde. */

/* ================================================================ */
/* Responsive - Kanon 1100/600 (T16/#603)                            */
/* ================================================================ */
@media (max-width: 1100px) {
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/ueberlaeuft. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* Enger Desktop: die Kategorie geht (Liste), Notiz und Verantwortlich gehen
   (Punkte-Editor). `!important` gegen die Shared-Zellenregel
   `.idf-list-rows .idf-list-row .idf-list-grid > div` (0,4,0), und die
   601px-Untergrenze, damit die Handy-Karte ihre Werte behaelt - dort
   entscheiden die data-m-Rollen (Muster T12 bis T15). */
@media (max-width: 1100px) and (min-width: 601px) {
  .cl-grid {
    grid-template-columns:
      44px            /* Greifer */
      minmax(0, 1fr)  /* Titel */
      200px           /* Fortschritt */
      44px 44px 44px 44px; /* Vorlage · Duplizieren · Archiv · Löschen */
  }
  .cl-grid > .cl-cell-kategorie { display: none !important; }

  .cp-grid {
    grid-template-columns:
      44px            /* Greifer */
      52px            /* Erledigt */
      minmax(0, 1fr)  /* Text */
      170px           /* Termin */
      44px;           /* Löschen */
  }
  .cp-grid > .cp-cell-verant,
  .cp-grid > .cp-cell-notiz { display: none !important; }
}