/* checklist.css — Checklist-Items + Assignee-Panel im Drawer. */

.app-scope .app-checklist-assignee {
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: var(--space-1-5);
}
.app-scope .app-checklist-assignee:hover { border-color: var(--lod-gray-200); }
.app-scope .app-checklist-assignee .avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--lod-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* "Noch nicht zugewiesen"-Avatar in der Checklisten-Assignee-Liste mit
   GLEICHEM gefuellten Kreis-Look wie Card-Footer und Drawer-Person-Field
   (nicht dashed border). Groesse 20x20 wie echte Mitarbeiter-Avatare. */
.app-scope .app-checklist-assignee .avatar.empty {
  background: var(--lod-gray-200);
  border: none;
  color: var(--lod-gray-500);
}
.app-scope .app-checklist-assignee .avatar.empty img {
  width: 60%; height: 60%; opacity: 0.55;
}
/* Gleiches Pattern auch im Checklist-Assignee-Panel (Popover-Liste):
   empty-Avatars sind 22x22 wie die echten Avatare dort. Explizit
   border-radius 50% + flex-Layout fuer zentriertes Icon, sonst rendert
   der Browser das Empty-Avatar als Quadrat. */
.app-scope .app-checklist-assignee-item .avatar.empty,
.app-checklist-assignee-panel .avatar.empty {
  background: var(--lod-gray-200);
  color: var(--lod-gray-500);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-scope .app-checklist-assignee-item .avatar.empty img,
.app-checklist-assignee-panel .avatar.empty img {
  width: 60%; height: 60%; opacity: 0.55;
}

.app-checklist-assignee-panel { padding: var(--space-1-5); font-family: var(--lod-font-sans); box-sizing: border-box; width: 100%; }
.app-checklist-assignee-head {
  padding: var(--space-1-5) var(--space-2-5) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lod-gray-500);
}
.app-checklist-assignee-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.app-checklist-assignee-item:hover { background: var(--lod-gray-50); }
.app-checklist-assignee-item.is-active { background: var(--lod-darkblue-100); color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.app-checklist-assignee-item .avatar { width: 20px; height: 20px; font-size: 9px; color: var(--lod-white); font-weight: var(--fw-semibold); }

/* File-Uploader-CSS ausgelagert → _shared/file-uploader.css (eigenes Modul,
   auch von activity-log/kanban genutzt). */

/* Activity-Log */

/* ==========================================================================
   Checklist-v2 — Section-Header + Item-Liste.

   Struktur (aus Mockup):
     - Section-Header "CHECKLISTE · 0/3" wie Field-Label, KEIN Container
     - Items als flache Liste (Trennlinie oben ueber Header als subtiler
       Divider im Drawer-Body-Gap)
     - Add-Button als eigener Link-Button unterhalb der Liste

   Komponiert mit den Assignee-Klassen oben in dieser Datei (.app-checklist-
   assignee*) — selbe Datei, weil semantisch-eng zusammenhaengend.
   ========================================================================== */

/* Keine Trennlinie — Drawer nutzt reinen Abstand zwischen Sektionen
   (drawer-section { margin-top: var(--space-4-5)}).
   Der 32px-Abstand zur Form-Grid kommt aus dem drawer-body-gap. */
.app-scope .app-checklist-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}
/* Section-Header wie field-label-caps, Counter als sekundaeres Meta */
.app-scope .app-checklist-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.app-scope .app-checklist-title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--lod-gray-500);
}
.app-scope .app-checklist-progress {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--lod-gray-500);
  font-variant-numeric: tabular-nums;
}

/* Fortschrittsbalken unter Section-Header (4px hoch, tuerkis animated) */
.app-scope .app-checklist-progress-bar {
  height: 4px;
  background: var(--lod-gray-100);
  border-radius: var(--radius-circular);
  overflow: hidden;
  margin: var(--space-xxs) 0 var(--space-2);
}
.app-scope .app-checklist-progress-bar > div {
  height: 100%;
  background: var(--lod-turquoise);
  transition: width var(--duration-normal) var(--lod-ease);
  border-radius: var(--radius-circular);
}
.app-scope .app-checklist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.app-scope .app-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  min-height: 36px;
}
.app-scope .app-checklist-item:hover {
  background: var(--lod-gray-50);
}
/* Add-Button: Farbe --lod-gray-700, Plus-Icon medium-weight wie Text. */
.app-scope .app-checklist-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-2-5);
  align-self: flex-start;
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  color: var(--lod-gray-700);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-quick), background var(--duration-quick);
}
.app-scope .app-checklist-add:hover {
  color: var(--lod-darkblue);
  background: var(--lod-darkblue-50);
}
.app-scope .app-checklist-add:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-checklist-add-plus {
  font-size: var(--font-size-md);  /* 16px, gleiches Gewicht wie Text */
  font-weight: var(--fw-medium);
  width: 14px;
  text-align: center;
  color: inherit;  /* folgt dem Text-Farbton */
}

/* Empty-State-Hinweis bei leerer Checkliste — subtiles Grau-Label oberhalb
   des Add-Buttons, damit der Nutzer erkennt dass die Section befuellbar ist. */
.app-scope .app-checklist-empty-hint {
  font-size: var(--font-size-base);
  color: var(--lod-gray-500);
  padding: 0 var(--space-2-5);
  font-style: italic;
}
.app-scope .app-checklist-drag {
  cursor: grab;
  color: var(--lod-gray-300);
  font-size: var(--font-size-sm);
  user-select: none;
  min-width: 14px;
  text-align: center;
  /* MOB-0 Touch-Target: 44x44 effektiv durch padding */
  padding: var(--space-2-5) var(--space-1);
  margin: -10px 0;
}
.app-scope .app-checklist-drag:hover { color: var(--lod-gray-500); }
/* Custom-Check-Box (gruen/weiss, runder Haken) */
.app-scope .app-checklist-checkbox {
  /* Nativer Input wird visuell durch eigenen Box ersetzt */
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid var(--lod-gray-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  transition: all var(--duration-snappy);
  margin: 0;
  position: relative;
}
.app-scope .app-checklist-checkbox:hover {
  border-color: var(--lod-turquoise);
}
.app-scope .app-checklist-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}
.app-scope .app-checklist-checkbox:checked {
  background: var(--lod-success);
  border-color: var(--lod-success);
}
.app-scope .app-checklist-checkbox:checked::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid var(--lod-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  display: block;
}
.app-scope .app-checklist-text {
  flex: 1;
  font-size: 13px;
  color: var(--lod-gray-900);
  cursor: text;
  word-break: break-word;
  min-width: 0;
}
.app-scope .app-checklist-text.done {
  text-decoration: line-through;
  color: var(--lod-gray-500);
}
.app-scope .app-checklist-edit,
.app-scope .app-checklist-remove {
  opacity: 0;
  color: var(--lod-gray-500);
  transition: opacity var(--duration-quick), color var(--duration-quick);
  font-size: var(--font-size-sm);
  padding: var(--space-1-5);
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
}
.app-scope .app-checklist-item:hover .app-checklist-edit,
.app-scope .app-checklist-item:hover .app-checklist-remove,
.app-scope .app-checklist-item:focus-within .app-checklist-edit,
.app-scope .app-checklist-item:focus-within .app-checklist-remove { opacity: 1; }
.app-scope .app-checklist-edit:hover { color: var(--lod-darkblue); background: var(--lod-darkblue-50); }
.app-scope .app-checklist-remove:hover { color: var(--lod-danger); background: var(--status-danger-soft); }
.app-scope .app-checklist-edit-input {
  padding: 3px var(--space-1-5);
  font-size: 13px;
  height: auto;
  border-radius: var(--radius-sm);
}
.app-scope .app-checklist-ghost {
  opacity: 0.4;
  background: var(--lod-darkblue-50);
}

/* Mobile: Drag-Handle und Buttons groesser */
@media (max-width: 599px) {
  .app-scope .app-checklist-edit,
  .app-scope .app-checklist-remove { opacity: 1; }  /* auf Touch immer sichtbar */
  .app-scope .app-checklist-drag { padding: var(--space-3) var(--space-2); margin: -12px 0; }
}