/* ==========================================================================
   Harbor Branding - Steuer-IT
   Wird vom eigenen Portal-Image als /sit-brand.css ausgeliefert und in der
   index.html verlinkt. Palette identisch zum Keycloak-Theme und zum
   Argo-CD-Branding (Vorlage steuer-it.com, Hintergrund dort rgb(18,26,37)).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Lexend:wght@300;400;500&display=swap');

:root {
  --sit-bg:        #111B26;
  --sit-surface-2: #1B2A39;
  --sit-line:      #26374A;
  /* Das Logo-PNG hat keine Transparenz - es bringt diesen Hintergrund mit.
     Alle Flaechen, auf denen es liegt, muessen exakt denselben Ton haben,
     sonst zeichnet sich ein Kasten ab. */
  --sit-logo-bg:   #111B26;
  --sit-accent:    #116DFF;
  --sit-accent-hi: #3D88FF;
  --sit-muted:     #C4C6C9;
}

/* --- Anmeldeseite: Flaeche ------------------------------------------------
   Harbor legt rechts eine formatfuellende Dreiecksgrafik. Die weicht einem
   ruhigen Verlauf in der Hausfarbe.                                        */

.login-wrapper {
  background: var(--sit-bg) !important;
  background-image:
    radial-gradient(1200px 600px at 78% 18%, rgba(17,109,255,.18), transparent 60%),
    linear-gradient(160deg, var(--sit-bg) 0%, var(--sit-surface-2) 100%) !important;
}

/* Deckend in der Logofarbe, nicht transparent: sonst laeuft der Verlauf
   unter dem Logo durch und der Kasten wird wieder sichtbar. */
form.login {
  background: var(--sit-logo-bg) !important;
  border-right: 1px solid var(--sit-line) !important;
}

/* --- Wortmarke ------------------------------------------------------------
   Der Titel steht als Text "Harbor" im label.title. Text ausblenden, Logo als
   Hintergrundbild setzen.

   ACHTUNG: label.title UND .login-group liegen beide position:absolute auf
   derselben Koordinate. Das Original faellt nicht auf, weil der Titel nur 36px
   hoch ist; das Logo ist hoeher und wuerde den Knopf ueberlagern. Deshalb
   bekommt die Gruppe zusaetzliches padding-top.                            */

.login-wrapper label.title {
  font-size: 0 !important;
  display: block !important;
  width: 260px !important;
  height: 86px !important;
  background: url('/sit-brand-logo.png') left center / contain no-repeat !important;
}

.login-wrapper .login-group { padding-top: 130px !important; }

/* --- Anmeldeknopf ---------------------------------------------------------
   Der sichtbare Knopf ist das <button> INNERHALB des <a>. Das <a> selbst
   bleibt unsichtbar - wird es mitgestylt, entsteht ein zweiter, groesserer
   Kasten dahinter.

   Lexend statt der Display-Schrift Syne: in einer Schaltflaeche zaehlt
   Lesbarkeit.                                                              */

.login-group a { background: transparent !important; height: auto !important; display: block !important; }

.login-group a .oidc-login-button,
.login-group a button.btn-primary {
  background: var(--sit-accent) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-family: 'Lexend', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  height: 48px !important;
  min-height: 48px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.login-group a .oidc-login-button:hover,
.login-group a button.btn-primary:hover { background: var(--sit-accent-hi) !important; }

/* Harbor setzt "LOGIN WITH <oidc_name>" - englisch, auch bei deutscher
   Oberflaeche. Text ausblenden und eigenen setzen. */
.login-group a .oidc-login-button span { font-size: 0 !important; }
.login-group a .oidc-login-button span::after {
  content: "Mit Keycloak anmelden";
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1;
  display: inline-block;
}

/* --- Lokaler Datenbank-Login raus -----------------------------------------
   Ausgeblendet, nicht abgeschaltet: die Anmeldung laeuft ueber Keycloak, aber
   der Weg bleibt offen - ueber /account/sign-in?always_sign_in=true. Ein
   wirklich abgeschalteter lokaler Login wuerde bei einer Stoerung des
   Identity Providers niemanden mehr hereinlassen.

   Harbors Einstellung primary_auth_mode genuegt dafuer nicht, sie blendet den
   Knopf nicht aus - geprueft.                                              */

.login-group .divider-container,
.login-group > a:nth-of-type(2) { display: none !important; }

/* --- Kopfzeile ------------------------------------------------------------
   Das Harbor-Zeichen ist ein <img class="harbor-logo">, kein Icon-Element.  */

/* Kopfzeile in der Logofarbe - mit --sit-surface-2 stand ein sichtbar
   hellerer Balken hinter dem Logo. */
.header, clr-header.header-5 {
  background: var(--sit-logo-bg) !important;
  border-bottom: 1px solid var(--sit-line) !important;
}
.header .branding .nav-link img.harbor-logo { display: none !important; }
.header .branding .nav-link span.title { font-size: 0 !important; }
.header .branding .nav-link {
  background: url('/sit-brand-logo.png') left center / contain no-repeat !important;
  width: 110px !important;
}

/* --- Restliche Typografie der Anmeldeseite -------------------------------- */

.login-wrapper, .login-wrapper a, .login-wrapper label {
  font-family: 'Lexend', sans-serif !important;
}
.login-wrapper a:not([class]) { color: var(--sit-muted) !important; }
.login-wrapper a:not([class]):hover { color: #FFFFFF !important; }

/* --- Suchleiste in der Kopfzeile ------------------------------------------
   Auf der Anmeldeseite ohnehin funktionslos, und im angemeldeten Zustand
   fuehrt die Projektliste schneller zum Ziel.                              */

.header global-search,
.header .search-bar { display: none !important; }

/* --- Betreiberangabe ------------------------------------------------------
   Harbor bringt keine Fusszeile mit. Sie haengt deshalb an .login-group, also
   im Fluss direkt unter dem Anmeldebereich.

   Nicht an form.login mit position:absolute: die Spalte ist hoeher als der
   sichtbare Bereich, die Angabe landet dann unterhalb der Kante und ist ohne
   Scrollen unsichtbar. Und content braucht !important, sonst setzt Harbors
   eigene ::after-Regel ihn zurueck - beides nachgemessen.

   Gleiche Angabe und Gestaltung wie im Argo-CD-Branding.                    */

.login-group::after {
  content: "betrieben von\A Steuer IT \00B7  Mittelstr. 5 \00B7  47661 Issum\A info@steuer-it.com" !important;
  white-space: pre-line !important;
  display: block !important;
  margin-top: 3.5rem !important;
  text-align: center !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: .7rem !important;
  line-height: 1.7 !important;
  color: #6B7A8B !important;
}