/* ==========================================================================
   To-Do-Board
   Kompakte, aufklappbare Liste mit umschaltbarer Gruppierung und Drag & Drop.
   Nutzt die Intranet-Tokens aus variables.css — keine eigenen Farbwerte.
   ========================================================================== */

.todo-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   WERKZEUGLEISTE
   ========================================================================== */

.todo-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--in-line);
  border-radius: 12px;
  background: #fff;
}

.todo-toolbar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.todo-toolbar-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--in-line);
}

.todo-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.todo-toolbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--in-ink-400);
  min-width: 74px;
  flex: none;
}

.todo-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
}

.todo-summary {
  margin: 0;
  font-size: 12px;
  color: var(--in-ink-400);
}

.todo-chip {
  cursor: pointer;
  border: 1px solid var(--in-line);
  background: #fff;
  color: var(--in-ink-500);
  font-size: 12.5px;
  padding: 3px 10px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.todo-chip:hover {
  border-color: var(--in-blue-500);
  color: var(--in-navy-800);
}

.todo-chip.is-active {
  background: var(--in-navy-800);
  border-color: var(--in-navy-800);
  color: #fff;
}

.todo-chip-technisch.is-active {
  background: var(--in-blue-500);
  border-color: var(--in-blue-500);
}

.todo-chip-inhaltlich.is-active {
  background: var(--in-gold);
  border-color: var(--in-gold);
}

.todo-chip-done.is-active {
  background: var(--in-green);
  border-color: var(--in-green);
}

.todo-chip-blocked.is-active {
  background: var(--in-red);
  border-color: var(--in-red);
}

/* ==========================================================================
   GRUPPEN
   ========================================================================== */

.todo-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.todo-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 6px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--in-line);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.todo-group-head:hover .todo-group-title {
  color: var(--in-blue-500);
}

.todo-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--in-navy-800);
  margin: 0;
}

.todo-group-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--in-ink-500);
  background: var(--in-blue-50, #f2f7fd);
  border-radius: 999px;
  padding: 1px 8px;
}

.todo-group-hint {
  font-size: 11.5px;
  color: var(--in-ink-400);
}

/* Aufklapp-Pfeil, dreht sich beim Öffnen */
.todo-caret {
  display: inline-flex;
  flex: none;
  color: var(--in-ink-400);
  transition: transform 0.15s ease;
}

.todo-caret.is-open {
  transform: rotate(90deg);
}

/* Punkte — Status, Priorität und Art teilen sich dieselbe Klasse */
.todo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--in-ink-400);
}

.todo-dot-backlog { background: var(--in-ink-400); }
.todo-dot-blocked { background: var(--in-red); }
.todo-dot-ready { background: var(--in-blue-500); }
.todo-dot-inProgress { background: var(--in-amber); }
.todo-dot-done { background: var(--in-green); }
.todo-dot-dropped { background: var(--in-line); }

.todo-dot-hoch { background: var(--in-red); }
.todo-dot-mittel { background: var(--in-amber); }
.todo-dot-niedrig { background: var(--in-ink-400); }

.todo-dot-technisch { background: var(--in-blue-500); }
.todo-dot-inhaltlich { background: var(--in-gold); }

/* ==========================================================================
   DROP-ZIEL
   ========================================================================== */

.todo-dropzone {
  border-radius: 10px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.todo-dropzone.is-over {
  background: color-mix(in srgb, var(--in-blue-500) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--in-blue-500);
}

.todo-dropzone.is-over .todo-list {
  min-height: 46px;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 4px;
}

/* ==========================================================================
   KARTEN
   ========================================================================== */

.todo-card {
  padding: 0;
  overflow: hidden;
}

.todo-card.is-draggable {
  cursor: grab;
}

.todo-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

/* Kopfzeile ist der Aufklapp-Schalter */
/* Häkchen und aufklappbare Titelzeile liegen nebeneinander, nicht ineinander:
   Die Titelzeile ist selbst eine Schaltfläche, und eine Schaltfläche in einer
   Schaltfläche wäre weder gültiges HTML noch mit der Tastatur bedienbar. */
.todo-card-zeile {
  display: flex;
  align-items: center;
}

/* Die Trefferfläche ist bewusst größer als das Kästchen (WCAG: mindestens
   44 px). Das Kästchen selbst bleibt klein — hier wird nichts gestaltet,
   sondern die Systemdarstellung genutzt, die jeder kennt. */
.todo-haken-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.todo-haken {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--in-green, #2f9e6b);
}

.todo-haken:disabled {
  cursor: default;
  opacity: 0.55;
}

.todo-haken:focus-visible {
  outline: 2px solid var(--in-blue-400, #5b8ae6);
  outline-offset: 2px;
}

.todo-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Nimmt den Rest der Zeile ein, nachdem das Häkchen seinen Platz hat. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 13px 9px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.todo-card-head:hover {
  background: var(--in-blue-50, #f2f7fd);
}

.todo-card.is-open .todo-card-head {
  border-bottom: 1px solid var(--in-line);
}

.todo-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--in-ink-900);
  line-height: 1.4;
}

.todo-card-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Badges */
.todo-kind,
.todo-pill,
.todo-prio,
.todo-tag {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.todo-kind {
  font-weight: 700;
}

.todo-kind-technisch {
  color: var(--in-navy-800);
  background: var(--in-blue-100, #e7effb);
}

.todo-kind-inhaltlich {
  color: #7a5a12;
  background: var(--in-gold-soft, #f3ead4);
}

.todo-pill {
  border: 1px solid var(--in-line);
  color: var(--in-ink-500);
}

.todo-pill-blocked {
  color: var(--in-red);
  border-color: color-mix(in srgb, var(--in-red) 35%, transparent);
}

.todo-pill-done {
  color: var(--in-green);
  border-color: color-mix(in srgb, var(--in-green) 40%, transparent);
}

.todo-pill-ready {
  color: var(--in-blue-500);
  border-color: color-mix(in srgb, var(--in-blue-500) 35%, transparent);
}

.todo-pill-inProgress {
  color: var(--in-amber);
  border-color: color-mix(in srgb, var(--in-amber) 40%, transparent);
}

.todo-pill-backlog,
.todo-pill-dropped {
  color: var(--in-ink-400);
}

.todo-prio {
  border: 1px solid var(--in-line);
  color: var(--in-ink-500);
}

.todo-prio-hoch {
  color: var(--in-red);
  border-color: color-mix(in srgb, var(--in-red) 35%, transparent);
}

.todo-prio-mittel {
  color: var(--in-amber);
  border-color: color-mix(in srgb, var(--in-amber) 35%, transparent);
}

.todo-prio-niedrig {
  color: var(--in-ink-400);
}

.todo-tag {
  color: var(--in-ink-500);
  background: var(--in-line-soft, #f2f4f8);
}

/* Knapper Blocker-Hinweis in der zugeklappten Karte */
.todo-blocker-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 13px 8px 36px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--in-red);
  overflow: hidden;
}

.todo-blocker-mini span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-blocker-mini svg {
  flex: none;
}

/* Aufgeklappter Inhalt */
.todo-blocker {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 13px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--in-red);
  background: color-mix(in srgb, var(--in-red) 7%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--in-ink-900);
}

.todo-blocker svg {
  flex: none;
  margin-top: 2px;
  color: var(--in-red);
}

.todo-details {
  margin: 10px 13px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--in-ink-500);
  white-space: pre-wrap;
}

.todo-dates {
  margin: 9px 13px;
  font-size: 11px;
  color: var(--in-ink-400);
}

.todo-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 13px 12px;
  padding-top: 9px;
  border-top: 1px dashed var(--in-line);
}

.todo-move {
  cursor: pointer;
  border: 1px solid var(--in-line);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--in-ink-500);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.todo-move:hover {
  border-color: var(--in-blue-500);
  color: var(--in-navy-800);
}

.todo-move-done {
  color: var(--in-green);
  border-color: color-mix(in srgb, var(--in-green) 40%, transparent);
}

.todo-move-done:hover {
  border-color: var(--in-green);
  color: var(--in-green);
}

.todo-move-edit:hover {
  border-color: var(--in-gold);
  color: var(--in-gold);
}

.todo-move-delete:hover {
  border-color: var(--in-red);
  color: var(--in-red);
}

/* Erledigt: grün abgehakt, aber nie gelöscht */
.todo-card-done {
  border-color: color-mix(in srgb, var(--in-green) 35%, var(--in-line));
  background: color-mix(in srgb, var(--in-green) 4%, #fff);
}

.todo-card-done .todo-card-title {
  color: var(--in-green);
}

.todo-card-done .todo-card-title svg {
  flex: none;
  color: var(--in-green);
}

.todo-card-done .todo-details,
.todo-card-done .todo-dates {
  opacity: 0.75;
}

/* Vorschaukarten ohne Datenbank */
.todo-card-preview {
  border-style: dashed;
}

.todo-card-preview .todo-dates {
  font-style: italic;
}

/* ==========================================================================
   HINWEISE UND FORMULAR
   ========================================================================== */

.todo-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.todo-notice svg {
  flex: none;
  color: var(--in-ink-400);
}

.todo-notice-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--in-navy-800);
}

.todo-notice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--in-ink-500);
  max-width: 78ch;
}

.todo-banner {
  border-left: 3px solid var(--in-gold);
}

.todo-banner-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.todo-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

.todo-seed-hint {
  font-size: 12px;
  color: var(--in-ink-400);
}

.todo-form {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.todo-form-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--in-navy-800);
}

.todo-form-grid {
  gap: 11px;
}

.todo-field-full {
  grid-column: 1 / -1;
}

.todo-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.todo-field > span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--in-ink-500);
}

.todo-input {
  width: 100%;
  border: 1px solid var(--in-line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--in-ink-900);
  background: #fff;
}

.todo-input:focus {
  outline: none;
  border-color: var(--in-blue-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-blue-500) 18%, transparent);
}

.todo-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.55;
}

.todo-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   SCHMALE BILDSCHIRME
   ========================================================================== */

@media (max-width: 860px) {
  .todo-card-head {
    flex-wrap: wrap;
  }

  .todo-card-meta {
    width: 100%;
    justify-content: flex-start;
    padding-left: 23px;
  }

  .todo-toolbar-label {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .todo-caret,
  .todo-dropzone,
  .todo-chip {
    transition: none;
  }
}

/* Dezenter Testmodus-Hinweis in der Zusammenfassungszeile. */
.todo-localflag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7a5a12;
  background: var(--in-gold-soft, #f3ead4);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 4px;
}