/* f-solution Support - Portal-Design (dark-tech) fuer Zammad
   Abgeglichen mit https://portal.f-solution.eu/assets/dark-tech.css
   und dem Keycloak-Theme "fsolution". Eingebunden per nginx sub_filter.
   Umfang bewusst klein: Anmeldeseite vollstaendig, sonst nur Marken-Akzente.
   Rueckbau: Zeile im nginx-vhost entfernen (Sicherung daneben). */

:root {
  --fs-bg: #070a0f;
  --fs-surface: #0d131c;
  --fs-line: #21303c;
  --fs-text: #edf6f5;
  --fs-muted: #95a6b3;
  --fs-accent: #42e8cf;
  --fs-accent2: #55a7ff;
  --fs-dark: #04110f;
  --fs-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============ 1. Anmeldeseite: unabhaengig von hell/dunkel im Portal-Look ============ */

.login.fullscreen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 5%, rgba(66, 232, 207, .10), transparent 28rem),
    radial-gradient(circle at 10% 95%, rgba(85, 167, 255, .07), transparent 26rem),
    var(--fs-bg) !important;
  color: var(--fs-text) !important;
  font-family: var(--fs-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* Zeile ueber der Karte ("Anmeldung beim f-solution Support") */
.login.fullscreen .fullscreen-body > p {
  color: var(--fs-muted) !important;
  font-size: 15px;
  letter-spacing: .01em;
  margin-bottom: 18px;
}

/* Die Karte selbst: Glasflaeche wie im Portal */
.login.fullscreen .hero-unit {
  background: rgba(13, 19, 28, .78) !important;
  border: 1px solid rgba(149, 166, 179, .22) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(18px);
  color: var(--fs-text) !important;
  padding: 32px 30px 28px !important;
}

.login.fullscreen .hero-unit .company-logo {
  max-height: 46px;
  width: auto;
  margin-bottom: 22px;
}

/* Trenner "Anmelden mit" */
.login.fullscreen .separator {
  border-color: rgba(149, 166, 179, .22) !important;
}
.login.fullscreen .separator-text {
  /* deckend, sonst laeuft die Trennlinie durch die Schrift.
     Farbe = Kartenflaeche ueber dem Seitenhintergrund gemischt. */
  background: #121a24 !important;
  color: var(--fs-muted) !important;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 0 12px;
}

/* Hinweis zum Notfall-Passwortlogin fuer Administratoren: leise halten */
.login.fullscreen .fullscreen-body > .text-muted,
.login.fullscreen .js-adminPasswordLogin,
.login.fullscreen .fullscreen-body > p:last-of-type {
  color: var(--fs-muted) !important;
  font-size: 13px;
}

/* Der SSO-Knopf - das ist jetzt der Hauptweg, also auch der auffaelligste */
.login.fullscreen .auth-providers { margin-top: 4px; }

.login.fullscreen .auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px !important;
  border: 1px solid rgba(66, 232, 207, .45) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(66, 232, 207, .16), rgba(85, 167, 255, .12)) !important;
  color: var(--fs-text) !important;
  font-family: var(--fs-font) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.login.fullscreen .auth-provider:hover {
  border-color: var(--fs-accent) !important;
  background: linear-gradient(135deg, rgba(66, 232, 207, .26), rgba(85, 167, 255, .18)) !important;
  transform: translateY(-1px);
}
.login.fullscreen .auth-provider:active { transform: none; }
.login.fullscreen .auth-provider .icon { fill: var(--fs-accent) !important; }

/* Restliche Formularteile - nur sichtbar falls Passwort-Login je wieder an ist */
.login.fullscreen label,
.login.fullscreen .label-text { color: var(--fs-muted) !important; }

.login.fullscreen .form-control {
  background: rgba(7, 10, 15, .66) !important;
  border: 1px solid rgba(149, 166, 179, .26) !important;
  border-radius: 10px !important;
  color: var(--fs-text) !important;
}
.login.fullscreen .form-control:focus {
  border-color: var(--fs-accent) !important;
  box-shadow: 0 0 0 3px rgba(66, 232, 207, .16) !important;
}

.login.fullscreen .btn--primary {
  background: linear-gradient(135deg, var(--fs-accent), var(--fs-accent2)) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--fs-dark) !important;
  font-weight: 700;
}
.login.fullscreen .btn--text,
.login.fullscreen a { color: var(--fs-accent) !important; }

.login.fullscreen .alert--danger {
  background: rgba(255, 107, 107, .12) !important;
  border: 1px solid rgba(255, 107, 107, .4) !important;
  border-radius: 10px !important;
  color: #ffd9d9 !important;
}

/* ============ 2. Agenten-Oberflaeche: nur Marken-Akzente, Struktur unberuehrt ============ */
/* Absichtlich sparsam: Zammads eigenes Hell/Dunkel bleibt die Grundlage,
   damit Updates und Kontraste nicht brechen. */

html[data-theme="dark"] {
  --button-primary-background: #2bbda8;
  --button-primary-background-active: #22a894;
  --highlight: var(--fs-accent);
  --text-link: var(--fs-accent);
  --text-nav: var(--fs-accent);
}