/* ATHENORIS – Gestaltung der Zammad-Anmeldeseiten (Anmelden, Passwort vergessen, Registrierung).
   Eingebunden per nginx sub_filter (athenoris-branding.conf), wirkt nur auf .fullscreen-Seiten,
   nicht auf die Arbeitsoberfläche. Farben aus athenoris/app/public/theme/athenoris.css.
   Kontrast (WCAG 2.1, gemessen): Beschriftung #485C70 auf Weiß 6,9:1 · Knopf Weiß auf #043A65 11,7:1 ·
   Text #DCE5EE auf #021728 14,3:1 · Link #E7D9A8 auf #021728 12,9:1 · Fußzeile #9FB2C6 auf #021728 8,4:1 ·
   Feldrahmen #7A8DA1 auf Weiß ≥ 3:1 (WCAG 1.4.11) */

.fullscreen {
  background: radial-gradient(120% 80% at 50% 0%, #0A2F52 0%, #021728 62%) !important;
  color: #DCE5EE !important;
}

/* Kopfzeile „Bei … anmelden“ */
.fullscreen .fullscreen-body > p {
  color: #DCE5EE !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  letter-spacing: .02em;
  margin-bottom: 14px;
}

/* Markenzeile (Einstellung „Login-Nachricht“) */
.fullscreen .js-maintenanceLogin {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #C9D6E3 !important;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 0 !important;
  margin: -6px 0 16px !important;
}

/* Karte */
.fullscreen .hero-unit:not(.alert) {
  background: #FFFFFF !important;
  color: #062F52 !important;
  border-radius: 12px;
  border-top: 4px solid #BBAA74;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 34px 32px 26px;
}

.fullscreen .company-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(300px, 100%);
  max-height: 64px;
  margin: 0 auto 26px;
}

.fullscreen .formGroup-label label,
.fullscreen .hero-unit label {
  color: #485C70 !important;
  font-weight: 600;
  letter-spacing: .04em;
}

.fullscreen .hero-unit .inline-label,
.fullscreen .hero-unit .checkbox-replacement {
  color: #062F52 !important;
}

.fullscreen .form-control {
  background: #F7F9FB !important;
  border: 1px solid #7A8DA1 !important;
  color: #062F52 !important;
  border-radius: 8px;
}

.fullscreen .form-control:focus {
  border-color: #043A65 !important;
  box-shadow: 0 0 0 3px rgba(4, 58, 101, .18) !important;
  outline: none;
}

.fullscreen .btn--primary {
  background: #043A65 !important;
  color: #FFFFFF !important;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .02em;
}

.fullscreen .btn--primary:hover,
.fullscreen .btn--primary:focus-visible {
  background: #062F52 !important;
  box-shadow: 0 0 0 3px rgba(187, 170, 116, .55) !important;
}

/* „Passwort vergessen?“ und Links in der Karte */
.fullscreen .hero-unit a,
.fullscreen .hero-unit .btn--text {
  color: #043A65 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hinweistexte unter der Karte */
.fullscreen .fullscreen-body p,
.fullscreen .fullscreen-body .login-help {
  color: #DCE5EE;
}

.fullscreen .fullscreen-body > :not(.hero-unit) a {
  color: #E7D9A8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fullscreen .poweredBy,
.fullscreen .poweredBy a {
  color: #9FB2C6 !important;
  opacity: 1 !important;
}

@media (max-width: 480px) {
  .fullscreen .hero-unit:not(.alert) { padding: 26px 20px 20px; border-radius: 10px; }
}

/* ---------------------------------------------------------------------------------------------
   Mobilansicht (/mobile/login, Vue/Tailwind): dunkel bleiben, aber in ATHENORIS-Farben.
   Wirkt nur, solange das Anmeldeformular #signin auf der Seite ist.
   Kontrast (gemessen): Knopftext #021728 auf Gold #BBAA74 7,9:1 · Label Weiß auf #0E2A44 14,7:1 ·
   Feldrahmen #7A8DA1 auf #021728 5,3:1 · Links #E7D9A8 12,9:1 · Nebenlinks #9FB2C6 8,4:1
   --------------------------------------------------------------------------------------------- */
#app:has(form#signin) > div {
  background: radial-gradient(120% 70% at 50% 0%, #0A2F52 0%, #021728 62%) !important;
}

/* Logo (dunkler Schriftzug) auf dunklem Grund weiß darstellen */
#app:has(form#signin) main img[src*="product_logo"] {
  filter: brightness(0) invert(1);
  max-width: min(240px, 80vw) !important;
  height: auto;
}

#app:has(form#signin) main h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400 !important;
  letter-spacing: .02em;
  border-bottom: 2px solid #BBAA74;
  padding-bottom: 10px !important;
}

/* Markenzeile (Login-Nachricht) statt grünem Kasten */
#app:has(form#signin) main [role="alert"],
#app:has(form#signin) main .bg-green {
  background: transparent !important;
  color: #C9D6E3 !important;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 0 !important;
  margin-bottom: 14px;
}

#app:has(form#signin) form#signin .form-group {
  background: #0E2A44 !important;
  border: 1px solid #7A8DA1;
}

#app:has(form#signin) form#signin button[type="submit"] {
  background: #BBAA74 !important;
  color: #021728 !important;
  font-weight: 700;
}

#app:has(form#signin) form#signin button[type="submit"]:focus-visible {
  outline: 3px solid #E7D9A8;
  outline-offset: 2px;
}

/* „An mich erinnern“ und „Passwort vergessen?“ dürfen auf schmalen Geräten umbrechen */
#app:has(form#signin) form#signin div:has(> a[href*="password"]) {
  flex-wrap: wrap;
  gap: 10px 16px;
}

#app:has(form#signin) form#signin a[href*="password"] {
  color: #E7D9A8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#app:has(form#signin) main ~ * a,
#app:has(form#signin) footer a,
#app:has(form#signin) a.text-gray {
  color: #9FB2C6 !important;
}