/* Xinion-Anmeldeschirm fuer Forgejo auf GIT01.
   Erzeugt von infra/vulcan/git01/git01_anmeldeschirm.py (VULCAN-v1).
   NICHT von Hand aendern — der naechste Lauf ueberschreibt diese Datei.

   Geruest: Fomantic-UI. Karte = .page-content.user.signin .column,
   darin h4.ui.top.attached.header und .ui.attached.segment. */

/* Hintergrund. WebP zuerst, JPEG als Rueckfall. `fixed`, damit es beim Rollen steht. */
/* NUR AUF DER ANMELDESEITE (CIO 19.09.2026: „nach der Anmeldung muss das weiss sein").
   Die erste Fassung legte den Hintergrund auf `body` — also auf JEDE Seite des Git,
   auch auf Ablagen und Dateiansichten. Aufgefallen ist es erst nach dem Anmelden.
   `:has()` grenzt es auf die Seite ein, auf der die Anmeldekarte steht. */
body:has(.page-content.user.signin),
body:has(.page-content.user.signin).full,
body:has(.page-content.user.signin) .full.height {
    background: var(--vulcan-dunkel) url("/assets/img/login-hintergrund.jpeg")
                center / cover no-repeat fixed !important;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    body:has(.page-content.user.signin),
    body:has(.page-content.user.signin).full,
    body:has(.page-content.user.signin) .full.height {
        background-image: image-set(url("/assets/img/login-hintergrund.webp") type("image/webp"),
                                    url("/assets/img/login-hintergrund.jpeg") type("image/jpeg")) !important;
    }
}

/* Die Kopfleiste wuerde als dunkler Balken ueber dem Bild stehen. */
.page-content.user.signin ~ * .ui.secondary.menu,
body:has(.page-content.user.signin) #navbar {
    background: transparent !important;
    border: 0 !important;
}

/* Die Karte: durchscheinend mit Unschaerfe. Lage und Masse kommen aus
   anmeldeschirm/gemeinsam.py. */
.page-content.user.signin .column {
    padding: 2rem !important;
    background-color: rgba(255, 255, 255, var(--vulcan-karte-deckkraft)) !important;
    backdrop-filter: blur(var(--vulcan-unschaerfe));
    -webkit-backdrop-filter: blur(var(--vulcan-unschaerfe));
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .75) !important;
}

/* Die beiden inneren Flaechen bringen eigenes Weiss mit — sonst zeichnen sie
   einen zweiten Kasten in die Karte. */
.page-content.user.signin .ui.attached.segment,
.page-content.user.signin .ui.top.attached.header,
.page-content.user.signin .ui.container.fluid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Die Begruessung tritt an die Stelle von „Sign in".
   ABSTRICH: das ist CSS-Text, kein echter. Begruendung im Kopf dieser Datei. */
.page-content.user.signin h4.ui.top.attached.header {
    font-size: 0 !important;      /* verbirgt „Sign in", ohne das Element zu entfernen */
    text-align: center;
    margin-bottom: 1.25rem !important;
}
.page-content.user.signin h4.ui.top.attached.header::before {
    content: "Welcome\Ato the Git service of\AXinion Information Technologies";
    white-space: pre-line;
    display: block;
    font-size: 1.4rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--vulcan-dunkel);
    -webkit-text-fill-color: var(--vulcan-dunkel);
    text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
}

/* Beschriftungen und Felder lesbar. */
.page-content.user.signin label {
    color: var(--vulcan-dunkel) !important;
    font-weight: 600;
}
.page-content.user.signin input[type="text"],
.page-content.user.signin input[type="password"] {
    min-height: var(--vulcan-feld-hoehe);
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(17, 24, 39, .18) !important;
    color: #111827 !important;
}

/* Anmelde-Knopf in der Logofarbe. */
.page-content.user.signin .ui.primary.button {
    width: 100%;
    min-height: var(--vulcan-feld-hoehe);
    background-color: var(--vulcan-logo-gruen) !important;
    border-color: var(--vulcan-logo-gruen) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: .25rem;
}
.page-content.user.signin .ui.primary.button:hover {
    background-color: var(--vulcan-logo-gruen-dunkel) !important;
}

/* Der Microsoft-Knopf: weiss, gleiche Masse wie der Anmelde-Knopf — wie bei GLPI
   und NetBox. Fomantic gibt ihm sonst eine eigene Hoehe und einen eigenen Radius. */
.page-content.user.signin a.oauth-login-link,
.page-content.user.signin a.openidConnect.ui.button {
    width: 100% !important;
    min-height: var(--vulcan-feld-hoehe);
    background: #fff !important;
    color: var(--vulcan-dunkel) !important;
    border: 1px solid rgba(17, 24, 39, .18) !important;
    border-radius: .25rem !important;
    font-weight: 600;
}

/* Die Trennlinie zwischen den beiden Wegen vor dem Bild lesbar halten. */
.page-content.user.signin .divider.divider-text {
    color: var(--vulcan-dunkel) !important;
}
.page-content.user.signin .inline.field label {
    color: var(--vulcan-dunkel) !important;
}

/* Das Logo ueber dem Formular stammt aus der aelteren xinion.css. Mit der
   Begruessung darueber stuenden jetzt zwei Koepfe in der Karte — die anderen drei
   Schirme haben keins. */
.page-content.user.signin .ui.form::before {
    display: none !important;
}
/* „Passwort vergessen" bleibt, aber lesbar vor dem Bild. */
.page-content.user.signin a {
    color: var(--vulcan-logo-gruen-dunkel) !important;
}

/* --- Beschriftung des Benutzerfeldes (CIO 18.09.2026) ---
   Forgejo steht hinter Pangolin, nicht hinter einem eigenen nginx — es gibt hier
   keinen sub_filter fuer echten Text, und die Sprachdateien stecken wie die
   Vorlagen im Programm. Also CSS-Text, wie bei der Begruessung.

   ZWEI STOLPERSTELLEN, BEIDE TEUER BEZAHLT:
   1. Die gemeinsame Beschriftungsregel aus gemeinsam.py steht SPAETER in der Datei
      und setzt die Schriftgroesse zurueck. Ergebnis war „UsernameUsername or email
      address" — beide Texte uebereinander. Darum hier ein genauerer Selektor.
   2. Beim Haekchen „Remember this device" geht es NICHT: Fomantic zeichnet das
      Kaestchen selbst ueber `label::before` und den Haken ueber `label::after`.
      Wer dort Text hineinschreibt, loescht das Kaestchen. Diese Beschriftung bleibt
      deshalb, wie Forgejo sie liefert. */
.page-content.user.signin .required.field > label[for="user_name"] {
    font-size: 0 !important;
}
.page-content.user.signin .required.field > label[for="user_name"]::before {
    content: "Username";
    font-size: var(--vulcan-schrift-label);
    font-weight: 600;
    color: var(--vulcan-dunkel);
}

/* --- Beschriftung des Microsoft-Knopfes (CIO 18.09.2026: „Login mit Microsoft") ---
   Der Text ist ein blosser Textknoten im <a>, das Zeichen davor ein <img> mit
   festen Massen. `font-size: 0` blendet deshalb den Text aus und laesst das Bild
   stehen — das ist hier der ganze Kniff. */
/* GENAUER als die gemeinsame Schriftregel (.page-content.user.signin .ui.button):
   die setzt die Groesse zurueck und liess den Originaltext wieder erscheinen —
   sichtbar als „Anmelden mit Microsoft Login mit Microsoft". Zwei Regeln, beide
   richtig gemeint, und zusammen ein doppelter Text. */
.page-content.user.signin a.oauth-login-link.ui.button {
    font-size: 0 !important;
}
.page-content.user.signin a.oauth-login-link.ui.button::after {
    content: "Login mit Microsoft";
    font-size: .9375rem;
    font-weight: 600;
    color: var(--vulcan-dunkel);
}

/* --- Kopfleiste und Fusszeile auf der Anmeldeseite weg (CIO 18.09.2026) ---
   Forgejo zeigt dort seine Navigation (Logo, „Erkunden", „Hilfe", „Anmelden") und
   unten Fassung, Sprachwahl, Lizenzen. Die anderen vier Anmeldeschirme haben nichts
   davon — deshalb fiel es auf.
   Eingegrenzt auf die Anmeldeseite: `body:has(.page-content.user.signin)`. Ohne diese
   Eingrenzung waere die Navigation im ganzen Git weg, und das faellt erst auf, wenn
   jemand nicht mehr zu seinen Ablagen findet. */
body:has(.page-content.user.signin) #navbar,
body:has(.page-content.user.signin) .page-footer,
body:has(.page-content.user.signin) footer,
body:has(.page-content.user.signin) .xinion-footer,
body:has(.page-content.user.signin) .ui.followup.container {
    display: none !important;
}

/* --- Beschriftungen: Forgejo folgt der Browsersprache ---
   Dieselbe Ueberlegung wie bei GLPI und NetBox, nur ohne sub_filter: hier bleibt nur
   CSS. Die Schaltflaechen tragen ihren Text als Textknoten, `font-size: 0` blendet
   ihn aus und laesst Bilder (Microsoft-Zeichen) stehen. */
.page-content.user.signin .required.field > label[for="password"] {
    font-size: 0 !important;
}
.page-content.user.signin .required.field > label[for="password"]::before {
    content: "Password";
    font-size: var(--vulcan-schrift-label);
    font-weight: 600;
    color: var(--vulcan-dunkel);
}
.page-content.user.signin .ui.primary.button {
    font-size: 0 !important;
}
.page-content.user.signin .ui.primary.button::after {
    content: "Sign in";
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.page-content.user.signin .divider.divider-text {
    font-size: 0 !important;
}
.page-content.user.signin .divider.divider-text::after {
    content: "or";
    font-size: 13px;
    color: var(--vulcan-dunkel);
}
.page-content.user.signin a[href*="forgot_password"],
.page-content.user.signin a[href*="lostpassword"] {
    font-size: 0 !important;
}
.page-content.user.signin a[href*="forgot_password"]::after,
.page-content.user.signin a[href*="lostpassword"]::after {
    content: "Forgot password?";
    font-size: 14px;
}
/* Das Haekchen traegt seinen Text am label, dessen ::before Fomantic fuer das
   Kaestchen braucht. Darum hier am ELTERNKNOTEN ansetzen — der ist frei. */
.page-content.user.signin .inline.field .ui.checkbox > label {
    font-size: 0 !important;
}
/* Kaestchen und Text nebeneinander statt uebereinander. */
.page-content.user.signin .inline.field .ui.checkbox {
    display: inline-flex !important;
    align-items: center !important;
}
.page-content.user.signin .inline.field .ui.checkbox::after {
    content: "Remember me";
    font-size: var(--vulcan-schrift-label);
    font-weight: 600;
    color: var(--vulcan-dunkel);
    /* Das Kaestchen zeichnet Fomantic absolut positioniert am label — der Text muss
       daran vorbei, sonst verschwindet sein erster Buchstabe dahinter. */
    margin-left: 1.6rem;
    vertical-align: middle;
}

/* --- Gemeinsame Masse aller vier Anmeldeschirme ---
   Erzeugt aus infra/vulcan/anmeldeschirm/gemeinsam.py. Wer hier etwas aendert,
   aendert es fuer GLPI, NetBox, Zabbix und Wazuh zugleich — genau dafuer ist es da. */
:root {
    --vulcan-karte-breite: 512px;
    --vulcan-karte-links: 12vw;
    --vulcan-karte-oben: 18vh;
    --vulcan-karte-deckkraft: .20;
    --vulcan-unschaerfe: 18px;
    --vulcan-feld-hoehe: 46px;
    --vulcan-logo-gruen: #13A036;
    --vulcan-logo-gruen-dunkel: #0E7A29;
    --vulcan-dunkel: #1A1A2E;
    --vulcan-abstand-titel: 1.5rem;
    --vulcan-abstand-gruppe: 1rem;
    --vulcan-abstand-label: .35rem;
    --vulcan-schrift-label: 14px;
}

/* --- Gleiche Stelle auf allen vier Schirmen (gemeinsam.py) ---
   Fest am Fenster statt im Fluss des Rahmenwerks: nur so ist die Lage unabhaengig
   von den Aussenabstaenden, die Tabler, Zabbix und EUI jeweils mitbringen. */
.page-content.user.signin .column {
    position: fixed !important;
    left: var(--vulcan-karte-links) !important;
    top: var(--vulcan-karte-oben) !important;
    right: auto !important;
    bottom: auto !important;
    /* OHNE DIESE ZEILE SIND SIE WIEDER VERSCHIEDEN BREIT.
       Zabbix rechnet die Innenabstaende ZUR Breite dazu (content-box): aus 32rem
       wurden gemessene 598 statt 512 Bildpunkte, waehrend GLPI und NetBox stimmten.
       Gleiche Angabe, anderes Ergebnis — genau die Falle, die dieses Modul aufloesen
       soll. */
    box-sizing: border-box !important;
    width: var(--vulcan-karte-breite) !important;
    max-width: 92vw !important;
    /* Hoeher als das Fenster darf sie nicht werden — sonst waere der Anmelde-Knopf
       unerreichbar, und zwar ohne sichtbaren Hinweis. */
    max-height: 84vh;
    overflow-y: auto;
    margin: 0 !important;
}

/* Kleine oder niedrige Schirme: zurueck in den normalen Fluss. */
@media (max-width: 992px), (max-height: 544px) {
    .page-content.user.signin .column {
        position: static !important;
        max-height: none;
        margin: 6vh auto 0 !important;
        width: 92vw !important;
    }
}

/* --- Gleiche Feldhoehen auf allen Schirmen (gemeinsam.py) --- */
.page-content.user.signin h4.ui.top.attached.header {
    margin-bottom: var(--vulcan-abstand-titel) !important;
    /* AUSGLEICH JE SCHIRM, GEMESSEN — nicht geschaetzt.
       Eine feste Hoehe fuer den Begruessungsblock war der erste Versuch und ging
       schief: der Selektor trifft je nach Anwendung ZWEI Elemente (Titel und
       Unterzeile), die sich dann beide auf die Hoehe aufblasen. Der Abstand wuchs
       statt zu stimmen — Wazuh rutschte von 401 auf 436.
       Deshalb hier ein ausgewiesener Ausgleich pro Schirm. Er steht im Aufruf, ist
       aus dem Lichtbild gemessen und beim naechsten Mal nachmessbar:
       gemessen wird die Oberkante des ersten Eingabefeldes, Ziel sind 402. */
    padding-top: 38px !important;
}
.page-content.user.signin .field {
    margin-bottom: var(--vulcan-abstand-gruppe) !important;
    margin-top: 0 !important;
}
.page-content.user.signin .required.field > label {
    margin-bottom: var(--vulcan-abstand-label) !important;
    font-size: var(--vulcan-schrift-label) !important;
    font-weight: 600;
    display: block;
}

/* --- Gleiche Schrift auf allen Schirmen (gemeinsam.py) --- */
.page-content.user.signin .column,
/* SYMBOLE AUSNEHMEN. Zeichen wie das Schloss im SSO-Knopf kommen aus einer
   Symbolschrift (Tabler `ti`, Material `mdi`, FontAwesome `fa`). Wer die
   Schriftfamilie mit `*` ueber alles legt, ersetzt auch deren Schrift — und dann
   stehen dort leere Kaestchen. Genau das war nach dem ersten Lauf bei GLPI zu sehen. */
.page-content.user.signin .column *:not(i):not([class*="ti-"]):not([class*="mdi"]):not([class*="fa-"]):not([class*="icon"]) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.page-content.user.signin h4.ui.top.attached.header::before {
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.page-content.user.signin .column input,
.page-content.user.signin .column input::placeholder {
    font-size: 15px !important;
}
.page-content.user.signin .ui.button {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
