/* Fristen - Gestaltung zu public/fristen.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: Die Ampel ist das einzige farbige Element.

   Ein Wartungsplan verfuehrt dazu, alles einzufaerben - Objekt, Intervall,
   Zustaendige, jeweils in einer eigenen Tonart. Das Ergebnis ist eine Liste,
   in der das Ueberfaellige nicht mehr heraussticht, und dann hat die Farbe
   genau das zerstoert, wofuer sie da war. Darum: drei Toene (kritisch,
   Warnung, ruhig) an genau EINER Stelle je Zeile, alles andere in
   Textfarben.

   Die Zeile ist ein Raster und keine Flex-Reihe: Ampel, Auskunft, Termin,
   Knoepfe stehen dadurch in allen Zeilen untereinander auf derselben
   senkrechten Linie. Auf dem Handy fallen sie untereinander.

   AUF PAPIER (Regeln am Ende dieser Datei): druck.css raeumt Knoepfe und
   alles mit .no-print weg. Was hier zusaetzlich passiert, ist nur das
   Aufraeumen danach - der Platz der verschwundenen Knopfspalte wird
   eingezogen, und die Zeilen werden nicht ueber einen Seitenumbruch
   zerrissen. Der Ausdruck ist der Aushang im Heizungsraum, kein Nebenprodukt.

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

.fr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

.fr-kopf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fr-titel {
  font-size: var(--fs-xl);
  font-weight: 650;
  color: var(--text-primary);
  margin: 0;
}

.fr-unter {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- Die Lage in einer Zeile ---- */

.fr-lage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fr-lage-teil {
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-2);
}

.fr-lage-teil.ist-ueberfaellig {
  color: var(--critical-ink);
  border-color: var(--critical);
}

.fr-lage-teil.ist-heute,
.fr-lage-teil.ist-vorwarnung {
  color: var(--warning-ink);
  border-color: var(--warning);
}

/* ========================================================= Werkzeuge */

.fr-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* WARUM DIE DOPPELTEN WAEHLER (.fr .fr-feld statt nur .fr-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 `.fr-feld { ... }` stuende zwar da, verloere aber bei
   Rahmen, Radius, Polsterung und Breite still. Der Wurzelwaehler davor bringt
   eine zweite Klasse ins Gewicht und dreht das um - ohne !important, das nur
   die naechste Ueberraschung vorbereiten wuerde. (Dieselbe Falle wie in
   aufgaben.css, dort ausfuehrlich beschrieben.) */

.fr .fr-wahl {
  width: auto;
  min-width: 12rem;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: inherit;
}

.fr-schalter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.fr-neu-knopf {
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.fr-neu-knopf:hover { filter: brightness(1.06); }

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

.fr-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Ampel | Auskunft | Termin | Knoepfe.
 *
 * Die Auskunft bekommt 1fr und darf schrumpfen (min-width am Kind), die
 * uebrigen drei nehmen nur ihre Breite. So steht der Termin in jeder Zeile
 * an derselben Stelle - man liest eine Spalte hinunter statt jede Zeile neu.
 */
.fr-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}

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

/* Der eine farbige Punkt je Zeile. Als Pille und nicht als Balken am Rand:
   Ein Balken haette im Ausdruck eine Flaeche gebraucht, und Flaechen rastert
   jeder Drucker anders. */
.fr-ampel {
  grid-column: 1;
  flex: none;
  align-self: start;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

.fr-zeile.ist-ueberfaellig .fr-ampel {
  color: var(--critical-ink);
  border-color: var(--critical);
}

.fr-zeile.ist-heute .fr-ampel,
.fr-zeile.ist-vorwarnung .fr-ampel {
  color: var(--warning-ink);
  border-color: var(--warning);
}

/* Stillgelegtes tritt zurueck, verschwindet aber nicht: Es steht nur auf
   Wunsch in der Liste, und wer es sich ansieht, soll es lesen koennen. */
.fr-zeile.ist-still { opacity: .6; }

/* ---- Die Auskunft ---- */

.fr-mitte {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fr-zeile-titel {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  /* Umbrechen statt abschneiden: Eine Pruefung, von der man nur die erste
     Haelfte lesen kann, ist keine Auskunft. */
  overflow-wrap: anywhere;
}

.fr-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Die Angaben durch einen Punkt getrennt statt durch Rahmen: Vier Pillen
   nebeneinander waeren vier kleine Knoepfe, die keine sind. */
.fr-meta-teil + .fr-meta-teil::before {
  content: "·";
  margin-right: 10px;
  color: var(--text-muted);
}

.fr-meta-objekt { font-weight: 600; }

.fr-letzte {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.fr-zeile-notiz {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ---- Der Termin ---- */

.fr-termin {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}

.fr-termin-datum {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.fr-termin-wann {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.fr-zeile.ist-ueberfaellig .fr-termin-wann { color: var(--critical-ink); }
.fr-zeile.ist-heute .fr-termin-wann { color: var(--warning-ink); }

/* ---- Knoepfe ---- */

.fr-knoepfe {
  grid-column: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fr-erledigt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-schnell) var(--easing),
    background var(--dur-schnell) var(--easing);
}

.fr-erledigt svg { width: 15px; height: 15px; }

.fr-erledigt:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* Der stille Knopf: Text ohne Rahmen. Bearbeiten und Verlauf sind
   Nebenwege - haetten sie denselben Rahmen wie "Erledigt", stuenden drei
   gleich laute Knoepfe an einer Zeile, und keiner wuerde mehr fuehren. */
.fr-still-knopf {
  padding: 6px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.fr-still-knopf:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

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

.fr-stand {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ======================================================== Aufgeklapptes */

/* Volle Breite unter der Zeile: Ein Formular, das sich in die Termin- und
   Knopfspalte quetscht, ist auf dem Handy unbedienbar. */
.fr-auf {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.fr-neu .fr-auf { margin-top: 0; }

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

/* ---- Formularfelder ---- */

/* Zwei Spalten am Schreibtisch, eine auf dem Handy. auto-fit statt fester
   Zahl: Bei einem schmalen Fenster faellt die zweite Spalte von selbst weg,
   ohne dass es dafuer eine eigene Regel braucht. */
.fr-form-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 12px;
}

.fr-form-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 12px;
}

.fr-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fr-label.ist-versteckt { display: none; }

.fr-label-text {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

/* Die Felder liegen auf --surface-1, die aufgeklappte Flaeche um sie herum
   auf --surface-2. Zwei Toene, damit sich das Eingebbare vom Kasten abhebt -
   im dunklen Erscheinungsbild ist --surface-2 der hellere von beiden, im
   hellen der leicht kuehlere; in beiden Faellen bleibt der Unterschied
   sichtbar, ohne dass ein weiterer Rahmen noetig waere. */
.fr .fr-feld {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
}

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

.fr .fr-feld-notiz {
  resize: vertical;
  /* Zwei Zeilen statt der 92px, die styles.css jedem textarea gibt: Die
     Notiz ist ein Nachsatz, kein Aufsatz. */
  min-height: 48px;
}

.fr-form-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fr-haupt {
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.fr-haupt:hover { filter: brightness(1.06); }

/* Ein gesperrter Knopf muss auch aussehen wie einer. Ohne diese Regel sieht
   der Doppelklick-Schutz aus wie ein Knopf, der nichts tut. */
.fr-haupt:disabled {
  opacity: .55;
  cursor: default;
  filter: none;
}

/* Schiebt Stilllegen und Loeschen ans andere Ende der Reihe - weg von
   "Speichern", damit sich niemand vergreift. */
.fr-rechts { margin-left: auto; }

.fr-weg {
  padding: 6px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
}

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

/* ---- Verlauf ---- */

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

.fr-verlauf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.fr-verlauf-zeile:last-child { border-bottom: none; }

.fr-verlauf-soll {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.fr-verlauf-getan {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.fr-verlauf-wer { color: var(--text-muted); }

/* Die Luecke ist die einzige Stelle im Verlauf, die Farbe bekommt - sie ist
   auch das Einzige, wonach jemand sucht, der wissen will, ob der Plan
   eingehalten wurde. */
.fr-verlauf-luecke {
  font-weight: 600;
  color: var(--critical-ink);
}

.fr-verlauf-bem {
  flex: 1 0 100%;
  color: var(--text-secondary);
  white-space: pre-line;
}

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

/* Auf dem Handy faellt das Raster in eine Spalte. Der Termin rueckt dabei
   nach links, weil rechtsbuendig nur dann hilft, wenn daneben noch etwas
   steht. */
@media (max-width: 720px) {
  .fr-zeile {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .fr-ampel,
  .fr-mitte,
  .fr-termin,
  .fr-knoepfe,
  .fr-auf {
    grid-column: 1;
  }

  .fr-ampel { justify-self: start; }

  .fr-termin {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    gap: 8px;
    align-self: start;
  }

  .fr-neu-knopf { margin-left: 0; }
}

/* Kein Darueberfahren (Finger statt Maus): Die Trefferflaechen wachsen auf
   das, was ein Daumen trifft. */
@media (hover: none) {
  .fr-erledigt { padding: 10px 14px; }
  .fr-still-knopf { padding: 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-erledigt { transition: none; }
}

/* ============================================================== Papier */

/*
 * Der Ausdruck ist der Aushang im Heizungsraum.
 *
 * druck.css hat vorher schon jeden <button> und alles mit .no-print
 * ausgeblendet - Ampelfarben, Termin und die letzte Erledigung bleiben also
 * stehen, weil sie hier bewusst KEINE Knoepfe sind (siehe Kopf von
 * public/fristen.js). Hier wird nur noch aufgeraeumt, was die verschwundenen
 * Knoepfe hinterlassen.
 */
@media print {
  /* Die vierte Spalte ist leer, sobald die Knoepfe weg sind - ohne diese
     Zeile bliebe rechts ein handbreiter weisser Streifen stehen. */
  .fr-zeile {
    grid-template-columns: auto 1fr auto;
    padding: 6px 0;
    /* Eine Zeile darf nicht ueber den Seitenumbruch zerrissen werden: Ein
       Termin auf Seite 2, dessen Titel auf Seite 1 steht, ist keine
       Auskunft. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Aufgeklapptes gehoert nicht aufs Papier: Es ist ein Arbeitsschritt,
     kein Plan. Stuende es im Ausdruck, haette der Aushang mittendrin ein
     halb ausgefuelltes Formular. */
  .fr-auf { display: none; }

  /* Die Ampel traegt auf Papier ihren Rahmen, aber keine Flaeche - Flaechen
     rastert jeder Drucker anders, und Graustufen wuerden die drei Stufen
     ununterscheidbar machen. Der Text sagt es ohnehin. */
  .fr-ampel {
    background: none;
    border: 1px solid currentColor;
  }

  .fr-zeile { border-bottom: 1px solid #999; }

  /* Der Stand gehoert deutlich sichtbar auf das Blatt: Ein Wartungsplan an
     der Wand ohne Datum ist wertlos, weil niemand weiss, wie alt er ist. */
  .fr-stand {
    margin-top: 6mm;
    font-weight: 600;
  }
}