/* Ergänzungen zu Pico. Bewusst knapp: Die Oberfläche dient der Fehlersuche
   und dem Betrieb, nicht der Repräsentation. */

:root {
  --pico-font-size: 96%;
  --ampel-ok: #16a34a;
  --ampel-warnung: #d97706;
  --ampel-fehler: #dc2626;
  --ampel-ruhe: #71717a;
  /* Rubriken der Einstellungen */
  --rubrik-betrieb: #71717a;
  --rubrik-email: #2563eb;
  --rubrik-telegram: #0891b2;
  --rubrik-ntfy: #7c3aed;
  --rubrik-stayinformed: #16a34a;
}

.marke { text-decoration: none; }

/* Hinweisbänder */
.hinweis-probelauf { background: #fef9c3; border-color: #fde047; }
.hinweis-fehler,
.hinweis-error { background: #fee2e2; border-color: #fca5a5; }
.hinweis-erfolg,
.hinweis-success { background: #dcfce7; border-color: #86efac; }
.hinweis-info { background: #e0f2fe; border-color: #7dd3fc; }
.hinweis-probelauf, .hinweis-fehler, .hinweis-error,
.hinweis-erfolg, .hinweis-success, .hinweis-info {
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
}

/* Zustandspunkt */
.punkt {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: baseline;
}
.punkt-ok { background: var(--ampel-ok); }
.punkt-warnung { background: var(--ampel-warnung); }
.punkt-fehler { background: var(--ampel-fehler); }
.punkt-ruhe { background: var(--ampel-ruhe); }
/* Nichts behauptet: hohl statt gefüllt, damit "weiß ich nicht" nicht wie
   "läuft" aussieht. */
.punkt-unbekannt { background: transparent; box-shadow: inset 0 0 0 2px var(--ampel-ruhe); }

/* Kacheln der Übersicht */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.kachel { margin-bottom: 0; }
.kachel header { padding-bottom: 0.5rem; margin-bottom: 0.75rem; }

/* Kennzahlen */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.kennzahl { text-align: center; }
.kennzahl .wert { font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.kennzahl .name { font-size: 0.75rem; color: var(--pico-muted-color); }

/* Aufschlüsselung nach Zustellweg, unter der Zeile die sie zusammenfasst */
.je-weg { font-size: 0.7rem; color: var(--pico-muted-color); font-weight: normal; }

/* Tabellen */
table { font-size: 0.9rem; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.gedaempft { color: var(--pico-muted-color); font-size: 0.85rem; }
.abschneiden {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kennzeichen */
.marke-klein {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
}
.marke-umfrage { background: #ede9fe; color: #5b21b6; }
.marke-wichtig { background: #fee2e2; color: #991b1b; }
.marke-anhang { background: #e0f2fe; color: #075985; }

/* Rohdaten */
pre.roh {
  max-height: 32rem;
  overflow: auto;
  font-size: 0.8rem;
  background: var(--pico-code-background-color);
}

/* Vorschau der Mail */
iframe.vorschau {
  width: 100%;
  min-height: 34rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  background: #fff;
}

/* Restlaufzeiten */
.laufzeit { font-variant-numeric: tabular-nums; }
.laufzeit-knapp { color: var(--ampel-warnung); }
.laufzeit-abgelaufen { color: var(--ampel-fehler); }


/* Schaltflächen: Pico setzt für button und [role=button] ein großes
   vertikales Padding und für button[type=submit] die volle Breite. Die
   Variable wird auf dem Element selbst gesetzt, damit Eingabefelder
   unberührt bleiben. ``:is()`` hebt die Spezifität auf Picos Höhe, sonst
   gewinnt dessen Regel bei echten Buttons und nur Link-Buttons werden klein. */
:is(button, [role="button"], input[type="submit"]) {
  --pico-form-element-spacing-vertical: 0.4rem;
  --pico-form-element-spacing-horizontal: 0.9rem;
  width: auto;
  line-height: 1.25;
}

/* Reihe von Schaltflächen: Link-Buttons und Formular-Buttons stehen auf einer
   Linie und haben dieselbe Höhe. */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.aktionen form { margin: 0; }
.aktionen :is(button, [role="button"]) { margin-bottom: 0; }

/* Rubriken der Einstellungen: ein Band mit farbigem Seitenstreifen. */
tbody.rubrik th {
  padding-top: 0.9rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  border-left: 4px solid var(--rubrik-betrieb);
  background: var(--pico-card-sectioning-background-color);
}
tbody.rubrik-betrieb th { border-left-color: var(--rubrik-betrieb); }
tbody.rubrik-email th { border-left-color: var(--rubrik-email); }
tbody.rubrik-telegram th { border-left-color: var(--rubrik-telegram); }
tbody.rubrik-ntfy th { border-left-color: var(--rubrik-ntfy); }
tbody.rubrik-stayinformed th { border-left-color: var(--rubrik-stayinformed); }
tbody.rubrik:not(:first-of-type) th { padding-top: 1.5rem; }

/* Empfängerliste: schlank, ein Bearbeiten-Bereich je Person. */
table.empfaenger tbody { border-bottom: 1px solid var(--pico-muted-border-color); }
table.empfaenger tr.bearbeiten td { padding-top: 0; border-bottom: 0; }
table.empfaenger tr.bearbeiten[hidden] { display: none; }
table.empfaenger .bearbeiten-inhalt { padding: 0.25rem 0 0.5rem; }
table.empfaenger form { margin-bottom: 0.5rem; }
table.empfaenger td.zahl .klein { white-space: nowrap; }

/* Kleine Schaltflächen für Aktionen innerhalb einer Zeile oder eines Panels. */
:is(button, [role="button"]).klein {
  --pico-form-element-spacing-vertical: 0.2rem;
  --pico-form-element-spacing-horizontal: 0.6rem;
  font-size: 0.85rem;
}

/* Kästchen in einer Zeile statt untereinander. */
.auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-bottom: 0.5rem;
}
.auswahl label { margin: 0; white-space: nowrap; }

/* Wege einer Person: Dropdown und die Felder des gewählten Weges. */
.wege {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0.25rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--pico-muted-border-color);
}
.wege label { margin: 0; font-size: 0.85rem; }
.wege select { margin-bottom: 0; }
.weg-panel[hidden] { display: none; }
.weg-panel .aktionen { margin-top: 0.4rem; }
.weg-panel form.zeile { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.weg-panel form.zeile input { margin: 0; }
@media (max-width: 40rem) { .wege { grid-template-columns: 1fr; } }

/* Filterzeilen: Felder und Schaltfläche schließen unten bündig ab. Die Außenabstände
   von Label, Feld und Button sind unterschiedlich groß und würden den Button
   sonst nach unten versetzen. */
.filterzeile { align-items: end; }
.filterzeile :is(label, select, input, button, [role="button"]) { margin-bottom: 0; }
.filterzeile > :is(button, [role="button"]) { justify-self: start; }

/* Aufklapp-Knopf in Inhaltsbreite statt über die ganze Seite. */
details > summary[role="button"] { width: auto; display: inline-block; }

/* Eingebettete Anhänge (PDF-Betrachter, Bilder) auf der Nachrichtenseite. */
details.anhang-ansicht { margin: 0.75rem 0; }
details.anhang-ansicht summary { font-size: 0.9rem; }
img.anhang-bild {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
}
iframe.pdf {
  width: 100%;
  height: 44rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  background: #fff;
}

/* "Erneut zustellen": Empfänger je Person, Wege als Kennzeichen mit ihrem Stand. */
table.empfaengerwahl tr.abgesetzt td { opacity: 0.6; }
table.empfaengerwahl td { vertical-align: middle; }
table.empfaengerwahl input[type="checkbox"] { margin: 0; }
.marke-klein.weg-ok { background: #dcfce7; color: #166534; }
.marke-klein.weg-fehler { background: #fee2e2; color: #991b1b; }
.marke-klein.weg-offen { background: #fef3c7; color: #92400e; }
.marke-klein.weg-leer { background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); }