/* OakTrails – Anmeldeseite von Authelia (theme: 'auto')
   Tag: helles Banner · Nacht (Gerät im dunklen Modus): Nachtbanner */

/* ---------- Tag ---------- */
html {
  min-height: 100%;
  /* ganzes Bild immer sichtbar, unten verankert; freie Fläche in der Bildfarbe */
  background: #E6EEE7 url("/oaktrails/OakTrails-Banner.svg") center bottom / contain no-repeat;
}
body, #root, #root > div { background: transparent !important; }

/* Keine Karte: Anmeldefeld liegt direkt auf dem Bild */
#root .MuiContainer-maxWidthXs { background: transparent !important; }

/* Eingabefelder leicht hinterlegt, damit sie sich vom Bild abheben */
#root .MuiOutlinedInput-root { background: rgba(255, 255, 255, 0.75); }
#root .MuiOutlinedInput-notchedOutline { border-color: rgba(31, 58, 46, 0.35); }

/* OakTrails-Grün statt Standard-Blau */
#root .MuiButton-containedPrimary { background-color: #2f5e47 !important; }
#root .MuiButton-containedPrimary:hover { background-color: #1f3a2e !important; }
#root .MuiLink-root, #root a { color: #2f5e47 !important; }
#root .Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #2f5e47 !important; }
#root .MuiInputLabel-root.Mui-focused { color: #2f5e47 !important; }
#root .MuiCheckbox-root.Mui-checked { color: #2f5e47 !important; }

/* Überschrift und Sprachauswahl in Dunkelgrün, passend zum Schriftzug */
#root h5, #root header, #root header * { color: #1f3a2e !important; }


/* Breite Bildschirme: Anmeldefeld so weit nach unten schieben, dass es den
   Schriftzug im Bild nicht berührt (nur wenn nötig, sonst 0) */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 1905/1000) {
  #root .MuiContainer-maxWidthXs { transform: translateY(max(0px, calc(50vh - 32vw + 115px))); }
}


/* Schmalere Fenster: Anmeldefeld bei Bedarf etwas anheben, damit es über dem
   Schriftzug im Bild endet (nie höher als bis knapp unter den oberen Rand) */
@media (max-width: 1099.98px) {
  #root .MuiContainer-maxWidthXs {
    transform: translateY(clamp(calc(240px - 50vh), calc(50vh - 37.9vw - 254px), 0px));
  }
}


/* Abmelden-/Verfahren-Links in Grün statt Pink */
#root .MuiButton-textSecondary { color: #2f5e47 !important; }

/* ---------- Nacht ---------- */
@media (prefers-color-scheme: dark) {
  html { background: #16241D url("/oaktrails/OakTrails-Banner-Nacht.svg") center bottom / contain no-repeat; }
  #root .MuiOutlinedInput-root { background: rgba(10, 20, 15, 0.70); }
  #root .MuiOutlinedInput-notchedOutline { border-color: rgba(214, 232, 220, 0.30); }
  #root .MuiButton-containedPrimary { background-color: #4f8a6c !important; }
  #root .MuiButton-containedPrimary:hover { background-color: #5f9c7d !important; }
  #root .MuiLink-root, #root a { color: #b5d8c4 !important; }
  #root .Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #b5d8c4 !important; }
  #root .MuiInputLabel-root.Mui-focused, #root .MuiCheckbox-root.Mui-checked { color: #b5d8c4 !important; }
  #root h5, #root header, #root header * { color: #e4efe8 !important; }
  #root .MuiButton-textSecondary { color: #b5d8c4 !important; }
}