/* swissowned Git: Aussehen der GitLab-Anmeldeseite.
   Wirkt nur, wo body[data-testid="login-page"] steht. */

/* Bleibt hell, auch wenn das System dunkel ist: Das Portal kennt keinen dunklen Stil. */
:root.html-devise-layout:has(body[data-testid="login-page"]) { color-scheme: light; }

/* Verlaufshintergrund von GitLab weg. Die Selektoren von GitLab beginnen ebenso mit :root.html-devise-layout. */
:root.html-devise-layout body[data-testid="login-page"] { background: #ffffff; }
:root.html-devise-layout body[data-testid="login-page"]::before,
:root.html-devise-layout body[data-testid="login-page"]::after { content: none; background: none; }

body[data-testid="login-page"] {
  --so-bg: #ffffff;
  --so-ink: #16181d;
  --so-ink-2: #3b3f47;
  --so-line: #d6d9de;
  --so-tint: #f4f6f9;
  --so-deep: #0e3060;
  --so-red: #da291c;
  --so-red-dark: #b8211a;
  --so-shadow-red: 0 10px 24px -10px rgba(120, 10, 0, .6);
  --so-shadow-card: 0 20px 50px -30px rgba(15, 35, 60, .45), 0 0 0 1px rgba(15, 35, 60, .08);
  --so-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --so-control: 48px;
  --so-column: 416px;
  --so-gutter: 20px;
  --so-r-box: 12px;
  --so-r-focus: 8px;
  --so-r-pill: 980px;
  --so-focus: 3px solid var(--so-ink);
  --so-focus-offset: 3px;

  color: var(--so-ink);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;

  &, & * { font-family: var(--so-font); }

  a { color: var(--so-ink); }
  a:focus-visible, button:focus-visible {
    outline: var(--so-focus);
    outline-offset: var(--so-focus-offset);
    box-shadow: none;
  }
  a:focus-visible { border-radius: var(--so-r-focus); }

  /* Eine Spalte in der Mitte, waagrecht und senkrecht. */
  /* GitLab legt Inhalt und Fuss in denselben umbrechenden Flex-Rahmen, das zöge die Spalte nach oben. */
  div:has(> .container > main) { flex-flow: column nowrap; min-height: 100dvh; }
  .container:has(> main) { max-width: none; width: 100%; margin-block: auto; padding: 32px var(--so-gutter); }
  main.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--so-column);
    margin-inline: auto;
    padding: 0;
  }
  /* Rahmen auflösen, damit Marke, Meldung, Formular und Pflichttext in einer Spalte liegen (order). */
  main.content > .row, main.content > .row > div, main.content > .row > div > div { display: contents; }
  .bar > div:has(> img) { order: -2; }
  [data-testid="flash-container"] { order: -1; }
  & #js-custom-sign-in-description { order: 1; }

  /* Marke wie auf der Website: Logo und Name links. GitLab hat zwei h1, je eines pro Breite. */
  h1:has(+ #js-custom-sign-in-description) { display: none !important; }
  .bar > div:has(> img) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
    text-align: left;
  }
  .bar > div > img { flex: none; width: 28px; height: 28px; }
  .bar > div > h1 {
    display: block !important;
    margin: 0;
    color: var(--so-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  /* Pflichttext unter dem Formular. Das orange Band von GitLab sagt dasselbe noch einmal. */
  & #js-custom-sign-in-description {
    margin-top: 32px;
    color: var(--so-ink-2);
    font-size: 13px;
    line-height: 1.47;
  }
  & #js-custom-sign-in-description p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
  &:has(#js-custom-sign-in-description p) .footer-message { display: none; }

  /* Felder */
  & #sign-in-form [role="group"] { margin: 0 0 16px; }
  & #sign-in-form [role="group"] > label {
    margin: 0 0 6px;
    padding: 0;
    color: var(--so-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.47;
  }
  & #user_login, #user_password {
    width: 100%;
    max-width: none;
    height: var(--so-control);
    padding: 0 16px;
    border: 1px solid var(--so-line);
    border-radius: var(--so-r-box);
    background: var(--so-bg);
    box-shadow: none;
    color: var(--so-ink);
    font-family: var(--so-font);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  & #user_password { padding-right: 52px; }
  & #user_login:hover, #user_password:hover { border-color: var(--so-ink-2); }
  & #user_login:focus-visible, #user_password:focus-visible {
    border-color: var(--so-ink);
    box-shadow: none;
    outline: var(--so-focus);
    outline-offset: var(--so-focus-offset);
  }
  & #user_password + button {
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--so-r-focus);
    background: none;
    box-shadow: none;
    color: var(--so-ink-2);
  }
  & #user_password + button:hover { background: var(--so-tint); color: var(--so-ink); }
  & #user_password + button:focus-visible { box-shadow: none; outline: var(--so-focus); outline-offset: 0; }

  & #sign-in-form small { display: block; margin-top: 8px; color: var(--so-ink-2); font-size: 15px; }
  & #sign-in-form small > div { text-align: left; }
  a[href$="/users/password/new"] {
    color: var(--so-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Login merken: das echte Feld bleibt unsichtbar darüber, GitLab zeichnet das Kästchen am Label. */
  div:has(> div > #user_remember_me) { margin: 0 0 20px; }
  & #user_remember_me ~ label {
    padding-left: 10px;
    color: var(--so-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
  }
  & #user_remember_me ~ label::before, #user_remember_me ~ label::after { top: 2px; width: 18px; height: 18px; }
  & #user_remember_me ~ label::before {
    border: 1px solid var(--so-ink-2);
    border-radius: 4px;
    background-color: var(--so-bg);
    box-shadow: none;
  }
  & #user_remember_me:checked ~ label::before { border-color: var(--so-deep); background-color: var(--so-deep); }
  & #user_remember_me:focus-visible ~ label::before {
    box-shadow: none;
    outline: var(--so-focus);
    outline-offset: var(--so-focus-offset);
  }

  /* Knöpfe. Doppeltes Attribut, weil GitLab Zustände über mehrere Klassen auflöst. */
  [data-testid="sign-in-button"][type="submit"], [data-testid="passkey-login-button"][type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--so-r-pill);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.47;
    letter-spacing: -0.01em;
  }
  [data-testid="sign-in-button"] *, [data-testid="passkey-login-button"] * { color: inherit; font-weight: inherit; }
  [data-testid="sign-in-button"][type="submit"],
  [data-testid="sign-in-button"][type="submit"]:focus,
  [data-testid="sign-in-button"][type="submit"]:active {
    background: var(--so-red);
    box-shadow: var(--so-shadow-red);
    color: #ffffff;
  }
  [data-testid="sign-in-button"][type="submit"]:hover {
    background: var(--so-red-dark);
    box-shadow: var(--so-shadow-red);
    color: #ffffff;
  }
  [data-testid="passkey-form"] { margin-top: 16px; }
  [data-testid="passkey-login-button"][type="submit"],
  [data-testid="passkey-login-button"][type="submit"]:focus,
  [data-testid="passkey-login-button"][type="submit"]:active {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--so-ink);
    color: var(--so-ink);
  }
  [data-testid="passkey-login-button"][type="submit"]:hover {
    background: var(--so-ink);
    box-shadow: none;
    color: #ffffff;
  }
  [data-testid="sign-in-button"][type="submit"]:focus-visible,
  [data-testid="passkey-login-button"][type="submit"]:focus-visible {
    outline: var(--so-focus);
    outline-offset: var(--so-focus-offset);
  }
  [data-testid="passkey-login-button"] svg { flex: none; margin: 0; }

  /* Fehlermeldung wie im Portal: roter Text ohne Kasten, über dem Formular in der Spalte. */
  [data-testid="flash-container"] { position: static; margin: 0 0 16px; }
  [data-testid="flash-container"]:not(:has(.gl-alert)) { margin: 0; }
  [data-testid="flash-container"] .gl-alert {
    margin: 0;
    padding: 0 32px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  [data-testid="flash-container"] .gl-alert-icon-container { display: none; }
  [data-testid="flash-container"] .gl-alert-body {
    color: var(--so-red-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.47;
  }
  [data-testid="flash-container"] .gl-alert button {
    position: absolute;
    top: -4px;
    right: 0;
    width: 28px;
    height: 28px;
    border: 0;
    padding: 0;
    border-radius: var(--so-r-focus);
    background: none;
    box-shadow: none;
    color: var(--so-ink-2);
  }
  [data-testid="flash-container"] .gl-alert button:hover { background: var(--so-tint); color: var(--so-ink); }
  [data-testid="flash-container"] .gl-alert button:focus-visible {
    box-shadow: none;
    outline: var(--so-focus);
    outline-offset: 0;
  }

  /* Fuss: nur die Sprachauswahl bleibt, bündig mit der Spalte. */
  .footer-container > hr { display: none; }
  .footer-container a[href$="/explore"],
  .footer-container a[href$="/help"],
  .footer-container a[href="https://about.gitlab.com"],
  .footer-container a[href="https://forum.gitlab.com"] { display: none; }
  .footer-container > .container {
    display: flex;
    justify-content: flex-start;
    width: calc(100% - 2 * var(--so-gutter));
    max-width: var(--so-column);
    margin-inline: auto;
    padding: 0 0 24px;
  }
  .footer-container > .container > div:has(> a[href$="/explore"]) { display: none !important; }
  [data-testid="base-dropdown-toggle"][type="button"] {
    height: auto !important;
    margin-left: -6px;
    padding: 4px 6px !important;
    border: 0;
    border-radius: var(--so-r-focus);
    background: none;
    box-shadow: none;
    color: var(--so-ink-2);
    font-size: 13px;
    font-weight: 400;
  }
  [data-testid="base-dropdown-toggle"][type="button"] * { color: inherit; font-size: inherit; }
  [data-testid="base-dropdown-toggle"][type="button"]:hover,
  [data-testid="base-dropdown-toggle"][aria-expanded="true"] { background: var(--so-tint); color: var(--so-ink); }
  [data-testid="base-dropdown-toggle"][type="button"]:focus-visible {
    box-shadow: none;
    outline: var(--so-focus);
    outline-offset: 0;
  }
  /* Die Zustände der Liste und ihre Verläufe lesen Variablen von GitLab, auch im dunklen Modus. */
  [data-testid="base-dropdown-menu"] {
    --gl-dropdown-background-color: var(--so-bg);
    --gl-color-alpha-0: rgba(255, 255, 255, 0);
    --gl-dropdown-option-background-color-unselected-default: transparent;
    --gl-dropdown-option-background-color-unselected-hover: var(--so-tint);
    --gl-dropdown-option-background-color-unselected-focus: var(--so-tint);
    --gl-dropdown-option-background-color-unselected-active: var(--so-tint);
    --gl-dropdown-option-background-color-selected-default: transparent;
    --gl-dropdown-option-background-color-selected-hover: var(--so-tint);
    --gl-dropdown-option-background-color-selected-focus: var(--so-tint);
    --gl-dropdown-option-background-color-selected-active: var(--so-tint);
    border: 0;
    border-radius: var(--so-r-box);
    background: var(--so-bg);
    box-shadow: var(--so-shadow-card);
    color: var(--so-ink);
    font-size: 15px;
  }
  [data-testid="base-dropdown-menu"] .gl-new-dropdown-arrow { display: none; }
  [data-testid="base-dropdown-menu"] .gl-new-dropdown-inner { border-radius: inherit; background: var(--so-bg); }
  [data-testid="base-dropdown-menu"] [role="option"] { color: var(--so-ink); }
  [data-testid="base-dropdown-menu"] [role="option"] > span { border-radius: var(--so-r-focus); }
  [data-testid="base-dropdown-menu"] [role="option"] * { color: inherit; font-weight: inherit; }
  [data-testid="base-dropdown-menu"] [role="option"]:focus > span { box-shadow: inset 0 0 0 2px var(--so-ink); }
  [data-testid="base-dropdown-menu"] [role="option"][aria-selected="true"] { color: var(--so-deep); font-weight: 600; }
  [data-testid="base-dropdown-menu"] [data-testid="footer"] { border-color: var(--so-line); }
  [data-testid="base-dropdown-menu"] [data-testid="footer"] a { color: var(--so-ink); font-size: 13px; }
}