/* Apple-Look fuer Authelia – eingebunden ueber NPM (sub_filter) */

/* Farben: hell */
[data-theme=light] {
  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: rgba(255,255,255,.78);
  --card-foreground: #1d1d1f;
  --popover: #ffffff;
  --popover-foreground: #1d1d1f;
  --primary: #0071e3;
  --primary-foreground: #ffffff;
  --muted: #f0f0f3;
  --muted-foreground: #6e6e73;
  --accent: rgba(0,0,0,.05);
  --accent-foreground: #1d1d1f;
  --border: rgba(0,0,0,.08);
  --input: rgba(0,0,0,.12);
  --ring: #0071e3;
  --radius: 14px;
  --custom-icon: #1d1d1f;
  --custom-loading-bar: #0071e3;
  --x-bg-glow-1: rgba(94,92,230,.18);
  --x-bg-glow-2: rgba(10,132,255,.16);
  --x-field: #ffffff;
  --x-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.10);
}
/* Farben: dunkel (auch grey/oled) */
[data-theme=dark], [data-theme=grey], [data-theme=oled] {
  --background: #000000;
  --foreground: #f5f5f7;
  --card: rgba(28,28,30,.72);
  --card-foreground: #f5f5f7;
  --popover: #2c2c2e;
  --popover-foreground: #f5f5f7;
  --primary: #0a84ff;
  --primary-foreground: #ffffff;
  --muted: #2c2c2e;
  --muted-foreground: #a1a1a6;
  --accent: rgba(255,255,255,.08);
  --accent-foreground: #f5f5f7;
  --border: rgba(255,255,255,.10);
  --input: rgba(255,255,255,.14);
  --ring: #0a84ff;
  --radius: 14px;
  --custom-icon: #f5f5f7;
  --custom-loading-bar: #0a84ff;
  --x-bg-glow-1: rgba(94,92,230,.30);
  --x-bg-glow-2: rgba(10,132,255,.22);
  --x-field: rgba(255,255,255,.06);
  --x-shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 70px rgba(0,0,0,.55);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(60rem 40rem at 15% -10%, var(--x-bg-glow-1), transparent 60%),
    radial-gradient(50rem 36rem at 95% 110%, var(--x-bg-glow-2), transparent 60%),
    var(--background) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Die Anmelde-Box als schwebende Glas-Karte */
.max-w-\[444px\] {
  max-width: 420px !important;
  padding: 40px 32px 28px !important;
  background: var(--card);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--x-shadow);
  animation: x-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes x-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .max-w-\[444px\] { animation: none; } }
@media (max-width: 480px) {
  .max-w-\[444px\] { margin: 0 16px; width: auto !important; padding: 32px 20px 24px !important; }
}

/* Eigenes Symbol statt Standard-Avatar */
#UserSvg { display: none !important; }
.p-2:has(> #UserSvg)::before {
  content: "";
  display: block;
  width: 76px; height: 76px;
  margin: 0 auto 6px;
  background: url("/__theme/icon.svg") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(10,132,255,.35));
}

/* Titel */
h5 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin-top: 8px;
}

/* Eingabefelder */
input[data-slot=floating-input], #otp-input input, input[type=text], input[type=password] {
  background: var(--x-field) !important;
  border-radius: 12px !important;
  border-color: var(--input) !important;
  font-size: 17px !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input[data-slot=floating-input]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

/* Knoepfe: Apple-Pille */
button#sign-in-button, form button[type=submit], #second-factor-stage button.bg-primary, .max-w-\[444px\] button.bg-primary {
  height: 50px !important;
  border-radius: 980px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform .1s, filter .2s;
}
button#sign-in-button:hover { filter: brightness(1.06); }
button#sign-in-button:active { transform: scale(.98); }

/* Checkbox in Systemblau */
[data-slot=checkbox] { border-radius: 6px !important; }

/* Sprachwahl dezenter, Authelia-Hinweis ausblenden */
#language-button { font-size: 14px; color: var(--muted-foreground); }
a[href*="authelia.com"] { display: none !important; }

/* Eigene Beschriftung (nur Anmeldeschritt 1) */
#first-factor-stage h5 { font-size: 0 !important; }
#first-factor-stage h5::before {
  content: "Authentifizieren";
  font-size: 28px;
}
button#sign-in-button { font-size: 0 !important; }
button#sign-in-button::after {
  content: "Authentifizieren";
  font-size: 17px;
}