/* Vorgaenge - Gestaltung zu public/vorgaenge.js.

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

   WICHTIGSTE ENTSCHEIDUNG, wie bei aufgaben.css: Das Widget bringt
   KEINEN eigenen Rahmen und KEINEN eigenen Grund mit. Es ist kein
   Kasten, sondern ein Inhalt - und soll in einer Karte der Startseite,
   in einem Abschnitt des Objektblatts und in der Seitenspalte des
   Dienstes gleich gut aussehen. Wer einen Rahmen will, legt das Widget
   in einen; dafuer gibt es .card in styles.css.

   ZWEITE ENTSCHEIDUNG, und die ist hier neu: Der Zustand wird als WORT
   gezeigt und nicht als Farbfeld. Ein Vorgang ist eine Zusage, kein
   Alarm. Ein roter Klecks an jeder offenen Zeile macht eine Liste, die
   immer rot ist - und eine Liste, die immer rot ist, sieht niemand mehr
   an. Farbe traegt darum nur, was wirklich eine Frist gerissen hat
   (.vg-frist.ist-vorbei) und der Abschluss, der zurueckstellt.

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

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

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

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

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

/* Die Zahl der laufenden Vorgaenge - still, ohne farbigen Kreis. Ein
   Abzeichen, das immer da ist, wird weggeschaut. */
.vg-zahl {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

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

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

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

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

/* Abgeschlossenes tritt zurueck, statt zu verschwinden: Der Abschluss
   ist eine Aussage und bleibt sieben Tage in der Liste stehen. Kein
   Durchstreichen - durchgestrichen heisst "weg", und weg ist er nicht. */
.vg-zeile.ist-abgeschlossen {
  opacity: .6;
}

/* ---- Der Titel als Weg in den Verlauf ---- */

.vg-name {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.vg-name:hover .vg-text {
  text-decoration: underline;
}

/* Kein eigener Fokusring: styles.css setzt ihn bereits fuer jeden Knopf,
   jedes Feld und jede Auswahl an einer Stelle. Ein zweiter hier waere ein
   zweites Erscheinungsbild fuer dieselbe Sache. */

.vg-text {
  overflow-wrap: anywhere;
}

/* Die Berufs-Haut: Mangelmeldung, Auftrag, Sicherstellung, Quittung.
   Klein und grau davor - sie ordnet ein, sie ist nicht die Nachricht. */
.vg-art {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Zustand, Frist, Zustaendigkeit ---- */

.vg-zustand {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 8px;
}

/* Beauftragt ist der einzige Zustand mit einem Hauch Farbe: Er sagt
   "liegt bei jemandem", und das ist die Auskunft, die man im
   Vorbeigehen sucht. Der Rest bleibt Haarlinie. */
.vg-zustand.ist-beauftragt {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.vg-zustand.ist-erledigt,
.vg-zustand.ist-uebernommen {
  color: var(--text-muted);
}

.vg-frist {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.vg-frist.ist-heute {
  color: var(--text-primary);
}

/* Die einzige laute Stelle im Modul - und sie ist verdient: Eine
   gerissene Frist ist der Grund, warum jemand ueberhaupt hinschaut. */
.vg-frist.ist-vorbei {
  color: var(--critical-ink);
  font-weight: 600;
}

.vg-wer,
.vg-ort {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.vg-wer.ist-ich {
  color: var(--text-primary);
  font-weight: 600;
}

.vg-leer {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: 4px 0;
}

/* ============================================================== Tafel */

/* Die aufgeklappte Tafel sitzt in der Zeile und nicht daneben: Der
   Verlauf gehoert zu diesem einen Vorgang, nicht in eine zweite Spalte,
   die man mit dem Auge erst wieder zuordnen muss. */
.vg-tafel {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.vg-beschreibung {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vg-meta,
.vg-hinweis,
.vg-kettenhinweis {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---- Vermerk und Schritte ---- */

/* Rahmen, Grund und Innenabstand kommen aus styles.css - dort sind
   input, select und textarea bereits einheitlich gesetzt. Hier steht nur,
   was dieses Modul anders braucht: eine Spur kleiner, weil das Feld in
   einer Liste sitzt und nicht in einem Formular. */
.vg-vermerk {
  font-size: var(--fs-sm);
}

.vg-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vg-schritt {
  padding: 4px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}

.vg-schritt:hover {
  background: var(--surface-sunken);
}

.vg-schritt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Der Verlauf: das eigentliche Dokument ---- */

.vg-verlauf-titel {
  margin: 4px 0 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.vg-verlauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vg-schritt-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.vg-wann {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vg-akteur {
  font-weight: 600;
  color: var(--text-primary);
}

.vg-was {
  overflow-wrap: anywhere;
}

/* Der Grund steht auf einer eigenen Zeile: Beim Wiederoeffnen ist er
   die eigentliche Aussage und nicht eine Klammerbemerkung. */
.vg-grund {
  flex: 1 0 100%;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* ============================================================ Anlegen */

.vg-neu {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* WICHTIG, sonst ist das Textfeld zwanzig Pixel breit: styles.css setzt
   fuer input und select pauschal width auf 100 Prozent. In einer Reihe
   nebeneinander heisst das, dass die Auswahl die ganze Zeile nimmt und
   fuer das Feld nichts bleibt - genau so sah es beim ersten Aufbau aus.
   Beide bekommen darum ausdruecklich ihre eigene Breite zurueck. */
.vg-neu-art {
  flex: 0 0 auto;
  width: auto;
  max-width: 12rem;
  font-size: var(--fs-sm);
}

.vg-neu-feld {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: var(--fs-sm);
}

/* =============================================================== Handy */

@media (max-width: 640px) {
  /* Auf schmalem Schirm faellt der Titel in die eigene Zeile, damit er
     nicht auf drei Woerter zusammengequetscht wird. */
  .vg-name {
    flex: 1 0 100%;
  }
}

/* =============================================================== Druck */

/* GEGENPROBE ZUM AUSDRUCK, ausdruecklich geprueft:

   druck.css blendet Bedienbares pauschal aus - darunter die Zeile
   button, .btn, ... mit display none und !important. Der Titel eines
   Vorgangs sitzt aber in einem button, weil er der Weg in den Verlauf
   ist. Ohne die Regel hier fehlte auf dem Papier ausgerechnet der Titel,
   waehrend Zustand und Verlauf danebenstuenden - ein Ausdruck, der die
   Sache nicht mehr benennt.

   Die Regel darunter gewinnt gegen druck.css, weil eine Klasse staerker
   wiegt als ein Elementname und beide !important tragen. Sie macht aus
   dem Knopf wieder das, was er auf Papier ist: Text.

   Alles, was auf Papier wirklich nichts zu suchen hat - Vermerkfeld,
   Schrittknoepfe, Anlegezeile - wird NICHT zurueckgeholt. Die Knoepfe
   erledigt druck.css; Feld und Formular sind keine Knoepfe und darum
   hier ausdruecklich genannt. */
@media print {
  .vg-name {
    display: flex !important;
    color: #000 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: default;
  }

  .vg-name:hover .vg-text {
    text-decoration: none;
  }

  .vg-neu,
  .vg-vermerk {
    display: none !important;
  }

  /* Der Verlauf ist der Grund, warum ein Vorgang ueberhaupt gedruckt
     wird - er darf nicht durch einen Seitenumbruch zerrissen werden. */
  .vg-schritt-zeile,
  .vg-zeile {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vg-tafel,
  .vg-zeile {
    border-color: #999;
  }

  .vg-zeile.ist-abgeschlossen {
    opacity: 1;
  }
}