/* Aufgaben - Gestaltung zu public/aufgaben.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Schriftgroessen ueber --fs-xs..--fs-xl, Radien 8px, Abstaende
   in 4/8/12/16px. Keine neuen Farben, keine neuen Groessen.

   WICHTIGSTE ENTSCHEIDUNG: Das Widget bringt KEINEN eigenen Rahmen und
   KEINEN eigenen Grund mit. Es ist kein Kasten, sondern ein Inhalt - und es
   soll in einer Karte auf der Startseite, in einem Abschnitt des
   Objektblatts und in der Seitenspalte des Dienstes gleich gut aussehen.
   Braechte es seine eigene Karte mit, saesse ueberall dort eine Karte in
   einer Karte, mit doppeltem Rahmen und doppeltem Abstand. Wer einen Rahmen
   will, legt das Widget in einen - dafuer gibt es .card in styles.css.

   Getrennt wird darum nur INNEN, und zwar mit Haarlinien in var(--border) -
   dieselbe ruhige Trennung wie in den uebrigen Modulen. Kein Schatten.

   Geladen in index.html nach styles.css. */

.afg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* =============================================================== Kopf */

.afg-kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.afg-titel {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Die Zahl der offenen Aufgaben. Bewusst kein farbiger Kreis: Ein rotes
   Abzeichen macht aus einer Merkhilfe eine Mahnung, und eine Mahnung, die
   immer da ist, wird weggeschaut. Eine stille Zahl reicht. */
.afg-zahl {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== Liste */

.afg-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.afg-zeile {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}

.afg-liste .afg-zeile:last-child {
  border-bottom: none;
}

/* Die gezogene Zeile hebt sich ab, ohne zu springen: leicht heller Grund,
   kein Schatten, keine Drehung. Der Finger soll sehen, was er haelt. */
.afg-zeile.ist-gezogen {
  background: var(--surface-2);
  border-radius: 8px;
  border-bottom-color: transparent;
}

/* Erledigtes tritt zurueck statt zu verschwinden: Der Haken muss nach dem
   Klick noch dastehen, sonst weiss niemand, ob er getroffen hat - und die
   acht Sekunden Rueckweg brauchen etwas, worauf sie sich beziehen. */
.afg-liste-erledigt {
  opacity: .55;
}

.afg-liste-erledigt .afg-text {
  text-decoration: line-through;
}

/* ---- Griff zum Umsortieren ---- */

.afg-griff {
  flex: none;
  width: 20px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: grab;
  /* Nur der Griff nimmt die Beruehrung an sich - so bleibt die Liste
     ansonsten mit dem Finger scrollbar, waehrend das Ziehen trotzdem
     funktioniert. Ohne diese Zeile scrollt das Handy die Seite, sobald man
     eine Zeile anheben will. */
  touch-action: none;
  opacity: 0;
  transition: opacity var(--dur-schnell) var(--easing);
}

.afg-griff svg { width: 16px; height: 16px; fill: currentColor; }

/* Am Schreibtisch erscheint der Griff erst, wenn die Maus in der Naehe ist -
   eine Liste voller Punktraster ist unruhig. Auf dem Handy gibt es kein
   Darueberfahren, dort steht er darum immer leise da (Regel weiter unten). */
.afg-zeile:hover .afg-griff,
.afg-griff:focus-visible {
  opacity: .7;
}

.afg-griff:active { cursor: grabbing; }

/* ---- Haken ---- */

.afg-haken {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: border-color var(--dur-schnell) var(--easing),
    background var(--dur-schnell) var(--easing),
    color var(--dur-schnell) var(--easing);
}

.afg-haken svg { width: 14px; height: 14px; }

/* Der Haken zeigt sich blass, sobald die Maus darauf liegt: Er verspricht,
   was der Klick tun wird, bevor er getan ist. */
.afg-haken:hover {
  border-color: var(--accent);
  color: var(--text-muted);
}

.afg-haken[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---- Mitte: der eigentliche Inhalt ---- */

.afg-mitte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 4px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}

.afg-mitte:hover { background: var(--surface-2); }

.afg-text {
  font-size: var(--fs-md);
  color: var(--text-primary);
  /* Umbrechen statt abschneiden: Eine Aufgabe, von der man nur die erste
     Haelfte lesen kann, ist keine Merkhilfe. */
  overflow-wrap: anywhere;
}

/* Die Faelligkeit. Eine Pille in der ruhigen Grundfarbe; erst wenn der Tag
   da oder vorbei ist, bekommt sie Farbe. Drei Abstufungen, nicht mehr. */
.afg-frist {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.afg-frist.ist-heute {
  color: var(--warning-ink);
  border-color: var(--warning);
}

.afg-frist.ist-vorbei {
  color: var(--critical-ink);
  border-color: var(--critical);
}

/* Wer die Aufgabe angelegt hat - nur bei fremden Gruppenaufgaben sichtbar. */
.afg-von {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.afg-leer {
  list-style: none;
  padding: 8px 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ====================================================== Rueckseite */

/* Alles, was nicht in die Zeile gehoert, liegt hier: Notiz, Termin,
   Wegwerfen. Volle Breite unter der Zeile, damit auf dem Handy nichts
   nebeneinander gequetscht wird. */
.afg-rueck {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px 12px 26px;
}

/* WARUM DIE DOPPELTEN WAEHLER (.afg .afg-feld statt nur .afg-feld):
   styles.css gestaltet Eingabefelder ueber `input[type=text], ...` - das ist
   ein Element plus ein Attribut und wiegt damit schwerer als eine einzelne
   Klasse. Eine Regel `.afg-feld { ... }` wuerde hier zwar dastehen, aber bei
   Rahmen, Radius, Polsterung und Breite still verlieren; genau das ist beim
   Bauen passiert (das Feld "Aufgabe hinzufuegen" trug einen Rahmen, obwohl
   hier `border: transparent` steht). Der Wurzelwaehler davor bringt eine
   zweite Klasse ins Gewicht und dreht das um - ohne !important, das nur die
   naechste Ueberraschung vorbereiten wuerde. */

.afg .afg-feld {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
}

.afg .afg-feld:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

.afg .afg-feld-notiz {
  resize: vertical;
  /* Zwei Zeilen statt der 92px, die styles.css jedem textarea gibt: Die
     Notiz ist ein Nachsatz, kein Aufsatz - und sie sitzt in einer Zeile
     einer Liste, die sonst auseinanderfaellt. */
  min-height: 48px;
}

.afg-rueck-reihe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Das Datumsfeld nimmt nur die Breite, die es braucht - styles.css gibt
   jedem input die volle Zeile, und dann stuende das Wegwerfen darunter
   statt daneben. */
.afg .afg-feld-datum {
  width: auto;
  flex: 0 1 auto;
}

/* Das Wegwerfen ist bewusst ein stiller Text und kein roter Knopf: Bei einer
   Aufgabe gibt es acht Sekunden lang den Weg zurueck, es braucht also keine
   Warnfarbe. Ein grosser roter Knopf waere hier nur laut. */
.afg-weg {
  margin-left: auto;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.afg-weg:hover {
  color: var(--critical-ink);
  background: var(--surface-2);
}

.afg-hinweis {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ======================================================== Neue Aufgabe */

/* Ein Feld, kein Knopf daneben. Enter legt an. Ein "Hinzufuegen"-Knopf waere
   die zweite Art, dasselbe zu tun - und auf dem Handy nimmt er die halbe
   Zeile weg. */
.afg-neu { display: flex; }

/* Doppelter Waehler aus demselben Grund wie oben bei .afg-feld. */
.afg .afg-neu-feld {
  width: 100%;
  padding: 8px 12px;
  /* Der Rahmen ist da, aber unsichtbar - so springt beim Hineingehen nichts.
     Ein leeres Feld mit sichtbarem Rahmen sieht aus wie eine unerledigte
     Pflicht; die Liste soll aber ruhig sein, solange nichts ansteht. */
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
}

.afg .afg-neu-feld::placeholder { color: var(--text-muted); }

.afg .afg-neu-feld:hover { background: var(--surface-2); }

.afg .afg-neu-feld:focus-visible {
  outline: none;
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================ Geraete */

/* Kein Darueberfahren (Finger statt Maus): Der Griff steht dauerhaft leise
   da, sonst waere die Sortierung auf dem Handy unauffindbar. Und die
   Trefferflaechen wachsen auf das, was ein Daumen trifft. */
@media (hover: none) {
  .afg-griff { opacity: .45; width: 28px; height: 34px; }
  .afg-haken { width: 26px; height: 26px; }
  .afg-mitte { padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .afg-griff,
  .afg-haken {
    transition: none;
  }
}