/* greylo.de – Branding der Login-Seite (auth.server.greylo.de)
 * Grundlage: Corporate Design Manual 1.0 (Farben, Schriften, Radius, Welle).
 * Wird von nginx (Container auth-brand) in die Authelia-Seite eingehängt.
 * Änderungen an dieser Datei wirken ohne Neustart (Browser-Cache: bis zu 5 Minuten, sonst Strg+F5). */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

/* ---------- Farbpalette ---------- */
:root,
[data-theme] {
  --greylo-deep: #0E6BA8;   /* Hauptfarbe: Überschriften, Links, Buttons */
  --greylo-aqua: #37B6D9;   /* Akzent: Welle, Fokus */
  --greylo-ink: #0F2436;    /* Text */
  --greylo-soft: #3D5568;   /* Sekundärtext */
  --greylo-mist: #EAF4F8;   /* Flächen */
  --greylo-paper: #FBFDFE;  /* Hintergrund */
  --greylo-coral: #F2705B;  /* Warnung, sparsam */
  --greylo-sun: #FFC857;    /* Highlight, sparsam */

  --background: var(--greylo-paper);
  --foreground: var(--greylo-ink);
  --card: #FFFFFF;
  --card-foreground: var(--greylo-ink);
  --popover: #FFFFFF;
  --popover-foreground: var(--greylo-ink);
  --primary: var(--greylo-deep);
  --primary-foreground: #FFFFFF;
  --secondary: var(--greylo-ink);
  --secondary-foreground: #FFFFFF;
  --muted: var(--greylo-mist);
  --muted-foreground: var(--greylo-soft);
  --accent: var(--greylo-mist);
  --accent-foreground: var(--greylo-ink);
  --destructive: var(--greylo-coral);
  --destructive-foreground: var(--greylo-ink);
  --warning: var(--greylo-sun);
  --warning-foreground: var(--greylo-ink);
  --info: var(--greylo-deep);
  --info-foreground: #FFFFFF;
  --border: #D6E6EE;
  --input: #C3D8E3;
  --ring: var(--greylo-aqua);
  --radius: 0.75rem;
  --custom-icon: var(--greylo-deep);
  --custom-loading-bar: var(--greylo-deep);
  --divider: rgb(15 36 54 / 0.12);
  color-scheme: light;
}

/* ---------- Grundfläche und Schrift ---------- */
body {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  background-color: var(--greylo-paper);
  background-image: linear-gradient(180deg, var(--greylo-mist) 0, var(--greylo-paper) 22rem);
  background-repeat: no-repeat;
  color: var(--greylo-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--greylo-ink);
}

/* ---------- Karte um das Formular ---------- */
#root div[class~="min-h-[90vh]"] > div {
  width: calc(100% - 2rem);
  max-width: 444px;
  padding: 1.75rem 2rem 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgb(15 36 54 / 0.28);
}

/* ---------- Logo (Mindestbreite laut Manual: 120 px) ---------- */
#root img[src*="logo"] {
  width: 196px;
  max-width: 72%;
  height: auto;
  margin: 0.25rem auto 0.9rem;
}

/* ---------- Überschrift mit Overline und Welle ---------- */
#root h5::before {
  content: "SERVER-LOGIN";
  display: block;
  margin-bottom: 0.35rem;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  color: var(--greylo-deep);
}

#root h5::after {
  content: "";
  display: block;
  width: 56px;
  height: 8px;
  margin: 0.6rem auto 0;
  background: url("wave.svg") center / contain no-repeat;
}

/* ---------- Eingabefelder ---------- */
#root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border-radius: 12px;
  background-color: #FFFFFF;
  color: var(--greylo-ink);
}

#root input:focus {
  border-color: var(--greylo-deep);
}

/* ---------- Buttons ---------- */
#root button.bg-primary {
  height: 2.75rem;
  border-radius: 12px;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

#root button.bg-primary:hover {
  background-color: #0B5889;
}

/* ---------- Links und Fußzeile ---------- */
#root a {
  color: var(--greylo-deep);
}

#root a[href*="authelia.com"] {
  color: var(--greylo-soft);
  opacity: 0.75;
}

/* ---------- Fußzeile: Link zu greylo.de und Support-Adresse ----------
 * Der Text selbst steht in /mnt/volume/apps/auth/nginx/default.conf (sub_filter). */
#root div[class~="min-h-[90vh]"] {
  /* Kopfzeile (60px) + Formular + Fußzeile ergeben zusammen genau eine Bildschirmhöhe */
  min-height: calc(100vh - 60px - 4rem);
}

#greylo-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  min-height: 4rem;
  padding: 0.75rem 1rem 1.25rem;
  box-sizing: border-box;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--greylo-soft);
  text-align: center;
}

#greylo-footer a {
  color: var(--greylo-deep);
  font-weight: 500;
  text-decoration: none;
}

#greylo-footer a:hover,
#greylo-footer a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--greylo-aqua);
  text-underline-offset: 3px;
}