/* ==========================================================================
   QOON – Mautic Login Overrides
   Ablage : /var/www/vhosts/qoon.com/backstage/mautic/qoon-mautic.css
   Einbau : Apache Substitute, eingehaengt vor </head> des Mautic-vHosts
   Hinweis: Eigene Datei, nicht mit qoon-theme.css der Suite mischen.
            Die Selektorwelten sind vollstaendig verschieden.

   Scoping
   -------
   Mautic hat kein eigenes Element fuer die Anmeldeseite. #main und .container
   existieren auf jeder Seite. Als Anker dient daher .login-form, die es nur
   im Anmeldeformular gibt, ausgewertet ueber :has().

   Faellt :has() aus (sehr alte Browser), bleibt das Panel in der Mautic-
   Standardoptik. Die Seite bleibt bedienbar.

   Wichtig zum Layout
   ------------------
   Mautic nutzt das Bootstrap-3-Grid mit float. Auf #main darf daher KEIN
   display:flex gesetzt werden: .container traegt ml-a/mr-a, wuerde als
   Flex-Item auf Inhaltsbreite schrumpfen, und .col-lg-4 rechnet seine
   33,33 % anschliessend von dieser Restbreite. Das Formular faellt dann
   zu einer schmalen Saeule zusammen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1  Hintergrund und vertikale Zentrierung

   Der Hintergrund liegt zusaetzlich auf html, weil .container absolut
   positioniert ist und body dadurch keine eigene Hoehe mehr aufbaut.
   -------------------------------------------------------------------------- */

html:has(.login-form),
body:has(.login-form) {
  min-height: 100vh;
  background-color: #010130 !important;
  background-image: url("https://m.qoon.com/dynamic/background-of-the-day") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Abdunkelung, damit die Karte unabhaengig vom Tagesbild lesbar bleibt */
body:has(.login-form)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(1, 1, 48, .55), rgba(1, 1, 48, .75));
  pointer-events: none;
}

/* position:relative ist zwingend: der Container darunter bezieht sich sonst
   auf den Viewport statt auf #main. z-index hebt ihn ueber die Abdunkelung. */
body:has(.login-form) #main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* left/right geben die Breite vor, die auto-Margins der .container zentrieren
   innerhalb der max-width. Damit rechnet das Grid wieder korrekt. */
body:has(.login-form) #main > .container {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin-top: 0 !important;
  padding-top: 0;
}

/* Alternative ohne absolute Positionierung, falls die Karte bei niedrigen
   Fenstern oben aus dem Bild laeuft. Dann die Regel oben ersetzen durch:

   body:has(.login-form) #main > .container {
     margin-top: 0 !important;
     padding-top: 8vh;
   }
*/


/* --------------------------------------------------------------------------
   2  Karte
   -------------------------------------------------------------------------- */

.panel[name="form-login"] {
  background: rgba(255, 255, 255, .5) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35) !important;
  overflow: hidden;
}

.panel[name="form-login"] .panel-body {
  background: transparent !important;
  padding: 2.5rem 2rem !important;
}


/* --------------------------------------------------------------------------
   3  Logo
   Die Mautic-Figur besteht aus drei Pfaden: .circle, .m und .m-arrow.
   Einfaerbung auf das Navy, damit sie zur Suite passt.
   Diesen Abschnitt loeschen, um die Mautic-Markenfarbe zu behalten.
   -------------------------------------------------------------------------- */

.panel[name="form-login"] .mautic-logo {
  background: transparent !important;
  box-shadow: none !important;
}

.panel[name="form-login"] .mautic-logo-figure {
  width: 84px;
  height: 84px;
}

.panel[name="form-login"] .mautic-logo-figure .circle,
.panel[name="form-login"] .mautic-logo-figure .m,
.panel[name="form-login"] .mautic-logo-figure .m-arrow {
  fill: #010130 !important;
}


/* --------------------------------------------------------------------------
   4  Eingabefelder

   Mautic nutzt Bootstrap-Input-Groups: Icon-Kasten und Feld sind zwei
   getrennte Elemente. Die inneren Rahmen entfallen und die Radien sind
   asymmetrisch, damit beides wie ein Feld wirkt.
   -------------------------------------------------------------------------- */

.panel[name="form-login"] .input-group .form-control {
  background: rgba(255, 255, 255, .85) !important;
  border: 1px solid rgba(1, 1, 48, .25) !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  color: #212529 !important;
  box-shadow: none !important;
}

.panel[name="form-login"] .input-group .input-group-addon {
  background: rgba(255, 255, 255, .85) !important;
  border: 1px solid rgba(1, 1, 48, .25) !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  color: #010130 !important;
}

.panel[name="form-login"] .input-group .form-control:focus {
  border-color: #010130 !important;
  box-shadow: 0 0 0 .2rem rgba(1, 1, 48, .25) !important;
  outline: none !important;
}

/* Der Fokusrahmen soll auch am Icon-Kasten sichtbar werden */
.panel[name="form-login"] .input-group:focus-within .input-group-addon {
  border-color: #010130 !important;
}

.panel[name="form-login"] .form-control::placeholder {
  color: #6c757d !important;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   5  Eingeloggt bleiben
   -------------------------------------------------------------------------- */

.panel[name="form-login"] .checkbox-inline label {
  color: #212529 !important;
  font-weight: 500 !important;
}


/* --------------------------------------------------------------------------
   6  Login-Button und Passwortlink
   -------------------------------------------------------------------------- */

.panel[name="form-login"] #form-loginbtn,
.panel[name="form-login"] .btn-primary {
  background-color: #010130 !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: .6rem 1rem !important;
}

.panel[name="form-login"] #form-loginbtn:hover,
.panel[name="form-login"] #form-loginbtn:focus,
.panel[name="form-login"] .btn-primary:hover,
.panel[name="form-login"] .btn-primary:focus {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}

.panel[name="form-login"] .login-form a {
  color: #010130 !important;
  font-weight: 600 !important;
}

.panel[name="form-login"] .login-form a:hover {
  color: #1e3a8a !important;
}


/* --------------------------------------------------------------------------
   7  Fusszeile
   Steht ausserhalb der Karte direkt auf dem Bild und braucht daher
   helle Schrift mit Schatten.
   -------------------------------------------------------------------------- */

body:has(.login-form) .text-secondary {
  color: rgba(255, 255, 255, .8) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
/* --------------------------------------------------------------------------
   8  Kopfleiste im eingeloggten Zustand

   #app-header existiert nur nach dem Login, daher kein :has() noetig.
   Das Mautic-Logo besteht aus zwei SVG (Figur und Schriftzug). Beide werden
   ausgeblendet und durch die QOON-Marke als Hintergrundbild ersetzt.
   -------------------------------------------------------------------------- */

#app-header.navbar,
#app-header {
  background-color: #010130 !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Alle Links und Icons in der Leiste */
#app-header .nav > li > a,
#app-header .navbar-nav > li > a,
#app-header .btn-ghost,
#app-header .search-button,
#app-header .dropdown-toggle {
  color: #ffffff !important;
}

#app-header .nav > li > a:hover,
#app-header .nav > li > a:focus,
#app-header .btn-ghost:hover,
#app-header .search-button:hover,
#app-header .dropdown.open > .dropdown-toggle {
  background-color: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

/* Logo austauschen */
#app-header .mautic-brand .mautic-logo-figure,
#app-header .mautic-brand .mautic-logo-text {
  display: none !important;
}

#app-header .brand-logo--desktop {
  width: 150px;
  height: 38px;
  background-image: url("https://storage.qoon.com/QOON-logo-white-200.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

#app-header .brand-logo--mobile {
  width: 96px;
  height: 32px;
  background-image: url("https://storage.qoon.com/QOON-logo-white-200.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Aufklappmenues bleiben hell, damit sie lesbar sind */
#app-header .dropdown-menu {
  background-color: #ffffff !important;
}

#app-header .dropdown-menu a,
#app-header .dropdown-menu .dropdown-header span,
#app-header .dropdown-menu .info .text {
  color: #212529 !important;
}

#app-header .dropdown-menu a:hover {
  background-color: #f1f5f9 !important;
  color: #010130 !important;
}

/* Ladebalken an das Navy angleichen */
#app-header .loading-bar {
  color: rgba(255, 255, 255, .85) !important;
}