/* Raumcheck-Blau ueber die ntfy-Oberflaeche gelegt.
 *
 * Warum als eigene Datei und nicht in der App: die Oberflaeche steckt im
 * ntfy-Programm selbst, ein Update wuerde jede Aenderung darin ueberschreiben.
 * Diese Datei liegt daneben und wird von nginx eingehaengt, ntfy bleibt
 * unberuehrt. Nach einem ntfy-Update also nichts zu reparieren, nur zu pruefen.
 *
 * `!important` ist hier kein Pfusch, sondern noetig: die Farben kommen aus
 * erzeugten Klassennamen (css-16bnq7t), die sich bei jedem Bau aendern. Die
 * Mui-Klassen daneben sind stabil, aber weniger spezifisch.
 */
.MuiAppBar-colorPrimary { background-color: #1b5e9c !important; }
a, a:visited { color: #1b5e9c !important; }
a:hover { color: #14476f !important; }
.MuiButton-containedPrimary { background-color: #1b5e9c !important; }
.MuiButton-containedPrimary:hover { background-color: #14476f !important; }
.MuiButton-textPrimary,
.MuiIconButton-colorPrimary,
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked { color: #1b5e9c !important; }
.MuiSwitch-colorPrimary.Mui-checked { color: #1b5e9c !important; }
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { background-color: #1b5e9c !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1b5e9c !important; }
.MuiInputLabel-root.Mui-focused { color: #1b5e9c !important; }
.MuiCircularProgress-colorPrimary { color: #1b5e9c !important; }

/* Die Kopfleiste traegt ihren Farbverlauf nicht auf sich selbst, sondern auf
   der Werkzeugleiste darin. Wer nur den Header umfaerbt, sieht weiter Gruen:
   im Stil steht dann Blau, im Bild liegt der Verlauf darueber. */
header .MuiToolbar-root {
  background-image: linear-gradient(150deg, #1b5e9c 0%, #14476f 100%) !important;
}

/* Zeichen und Name in der Leiste. Beide kommen aus dem ntfy-Programm, deshalb
   werden sie hier ersetzt statt dort geaendert. Der Dateiname des Zeichens
   traegt eine Pruefsumme, die sich bei jedem Bau aendert, deshalb passt die
   Regel auf den Namensteil und nicht auf die genaue Datei. */
header img[src*="/static/media/ntfy"] {
  content: url("/kopf-logo.svg");
}
header .MuiTypography-h6 { font-size: 0 !important; }
header .MuiTypography-h6::after {
  content: "Raumcheck";
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .01em;
}