/* SeeLias login page (seelias/pipeline/66-login-page.sh). Every rule is scoped to #sl-login or .sl-* classes. */
.sl-login {
  --sl-ink: #1f1f1f;
  --sl-muted: #595959;
  --sl-line: #dcdcdc;
  --sl-focus: #0f6cbd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.5rem 0 2.5rem;
  color: var(--sl-ink);
  font-size: 1rem;
  line-height: 1.45;
}
.sl-card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 2rem 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--sl-line);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}
.sl-js-only { display: none; }
html.sl-js .sl-js-only { display: block; }

.sl-lang { display: none; position: absolute; top: .625rem; inset-inline-end: .625rem; gap: .125rem; }
html.sl-js .sl-lang { display: flex; }
.sl-lang__btn {
  border: 0; background: none; padding: .25rem .5rem; border-radius: 6px;
  font-size: .8125rem; line-height: 1.2; color: var(--sl-muted); cursor: pointer;
}
.sl-lang__btn[aria-pressed="true"] { background: #efefef; color: var(--sl-ink); font-weight: 600; }

.sl-logo { display: block; width: 84px; height: auto; margin: .25rem auto 1rem; border-radius: 18px; }
.sl-title { margin: 0 0 .25rem; font-size: 1.5rem; line-height: 1.25; font-weight: 700; text-align: center; color: var(--sl-ink); }
.sl-subtitle { margin: 0 0 1.5rem; text-align: center; color: var(--sl-muted); }

.sl-field { margin: 0 0 .75rem; }
.sl-label { display: block; margin: 0 0 .375rem; font-size: .875rem; font-weight: 600; }
.sl-input {
  box-sizing: border-box; width: 100%; height: 2.75rem; padding: 0 .75rem;
  border: 1px solid #8a8a8a; border-radius: 8px; background: #fff; color: var(--sl-ink); font-size: 1rem;
}
.sl-input::placeholder { color: #8a8a8a; }
[dir="rtl"] .sl-input::placeholder { text-align: left; }

.sl-btn {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .75rem;
  width: 100%; min-height: 3rem; padding: .5rem 1rem; border-radius: 8px;
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.sl-btn--ms { background: #2f2f2f; border: 1px solid #2f2f2f; color: #fff; }
.sl-btn--ms:hover, .sl-btn--ms:focus { background: #111; color: #fff; text-decoration: none; }
.sl-btn--ms svg { flex: none; }
.sl-btn--compact { min-height: 2.5rem; width: auto; font-size: .9375rem; }
.sl-linkbtn {
  border: 0; background: none; padding: .25rem 0; color: var(--sl-muted);
  font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sl-hint { margin: .625rem 0 0; font-size: .8125rem; color: var(--sl-muted); text-align: center; }
.sl-msg {
  margin: .75rem 0; padding: .625rem .75rem; border: 1px solid #e8c766; border-radius: 8px;
  background: #fff8e1; font-size: .875rem;
}
.sl-msg[hidden] { display: none; }
.sl-msg p { margin: 0; }
.sl-msg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .625rem; }

.sl-login input:focus-visible, .sl-login button:focus-visible, .sl-login a:focus-visible, .sl-other__summary:focus-visible {
  outline: 2px solid var(--sl-focus); outline-offset: 2px;
}

.sl-other { margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--sl-line); }
.sl-other__summary {
  display: block; list-style: none; cursor: pointer; text-align: center;
  margin: 0; padding: .25rem 0; border: 0; background: none;
  font-size: .875rem; color: var(--sl-muted);
}
.sl-other__summary::-webkit-details-marker { display: none; }
.sl-other__summary::marker { content: ""; }
.sl-other__summary::before, .sl-other__summary::after { content: none; display: none; }
.sl-other { border-bottom: 0; }
.sl-other__summary span { text-decoration: underline; text-underline-offset: 2px; }
.sl-other[open] .sl-other__summary { margin-bottom: .75rem; }
.sl-note { margin: 0 0 .75rem; font-size: .8125rem; color: var(--sl-muted); }

/* The ILIAS UI login form, restyled inside the panel: labels above full-width fields, one full-width button. */
#sl-login form[name="login_form"] { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#sl-login form[name="login_form"] .c-form__header,
#sl-login form[name="login_form"] .c-form__required,
#sl-login form[name="login_form"] .asterisk { display: none; }
#sl-login form[name="login_form"] > fieldset.c-input { display: block; margin: 0; padding: 0; border: 0; }
#sl-login form[name="login_form"] > fieldset.c-input > label { display: none; }
#sl-login form[name="login_form"] > fieldset.c-input > .c-input__field { display: block; width: 100%; margin: 0; padding: 0; }
#sl-login form[name="login_form"] .c-input__field > fieldset.c-input {
  display: block; margin: 0 0 .75rem; padding: 0; border: 0; background: none; box-shadow: none;
}
#sl-login form[name="login_form"] .c-input__field > fieldset.c-input > label {
  display: block; width: auto; max-width: none; float: none; margin: 0 0 .375rem; padding: 0;
  text-align: start; font-size: .875rem; font-weight: 600; color: var(--sl-ink);
}
#sl-login form[name="login_form"] .c-input__field > fieldset.c-input > .c-input__field { display: block; width: 100%; margin: 0; padding: 0; }
#sl-login form[name="login_form"] input[type="text"],
#sl-login form[name="login_form"] input[type="password"] {
  box-sizing: border-box; width: 100%; height: 2.75rem; padding: 0 .75rem; border-radius: 8px; font-size: 1rem;
}
#sl-login form[name="login_form"] .c-form__footer { display: block; margin: 0; padding: 0; border: 0; }
#sl-login form[name="login_form"] .c-form__actions { display: block; float: none; margin: 0; padding: 0; }
#sl-login form[name="login_form"] .c-form__actions .btn {
  display: block; width: 100%; min-height: 2.75rem; margin: .25rem 0 0; border-radius: 8px; font-size: 1rem;
}
.sl-links ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem;
  margin: .75rem 0 0; padding: 0; list-style: none; font-size: .8125rem;
}
.sl-links a { unicode-bidi: plaintext; }   /* ILIAS strings stay English in Hebrew mode: keep their own direction */
.sl-extra { margin: 0 0 1rem; }
.sl-legal:empty { display: none; }
.sl-lpe { box-sizing: border-box; width: 100%; max-width: 48rem; }

@media (max-width: 480px) {
  .sl-login { padding-top: .5rem; }
  .sl-card { padding: 1.75rem 1rem 1.25rem; border-radius: 12px; }
  .sl-title { font-size: 1.3125rem; }
}