/* New Login Design - Split Screen Layout */

body.login-page {
  margin: 0;
  padding: 0;
  font-family: "72", "72full", Arial, Helvetica, sans-serif;
  height: 100vh;
  overflow: hidden;
}

.login-container {
  display: flex;
  height: 100vh;
  min-height: 0;
  width: 100%;
}

.login-left {
  flex-shrink: 0;
  width: 540px;
  background: var(--sapBaseColor, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}

.login-left.login-left--wide {
  flex: 1;
  gap: 24px;
  padding: 32px 30px 0;
}

.login-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 16px 16px 16px 0;
  overflow: hidden;
  /* Hero image on the right panel. Inset with margin (not padding) so the
   * border-radius rounds the visible image edge — background-clip on a padded
   * box leaves the corners square. */
  background-image: url("/templates/signavio/images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signavio-text {
  font-size: 19.2px;
  font-weight: 600;
  color: rgb(0, 42, 134);
  font-family: var(--sapFontFamily, "72", Arial, sans-serif);
  letter-spacing: 0px;
  line-height: 1;
  margin-left: -2px;
}

.login-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-left--wide .login-content {
  max-width: 100%;
}

/* Card panel containing the logo + form. Fixed 480px wide per the design,
 * with its own background so it can sit centered inside a wider .login-left.
 * flex: 1 lets it grow vertically to fill .login-left so justify-content:center
 * on .login-left (below) centers it horizontally. */
.login-main {
  background: var(--sapBaseColor, #fff);
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: auto;
  animation: login-form-enter 0.3s ease-out 0.05s both;
}

.login-main.login-main--full {
  width: 100%;
  max-width: 100%;
}

/* Shared heading for all auth pages (login, register, tenant selection, mail
 * reset/forgot, thanks, resend activation). Matches the SAP UI5 object-header /
 * card title style (SIGSCX-928 design): SAP title colour + font tokens with a
 * fallback for each var. Every auth page uses the same heading. */
.login-heading {
  font-family: var(--sapFontFamily, "72");
  color: var(--sapObjectHeader_Title_TextColor, #131e29);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-field label,
.form-field ui5-label {
  max-width: 100%;
  color: var(--sapContent_LabelColor);
  font-family: var(--sapFontFamily);
  font-size: var(--sapFontSize);
  font-weight: 400;
  cursor: text;
}

.form-field ui5-input,
.form-field ui5-select {
  width: 100%;
}

.login-form hr {
  border: none;
  border-top: 1px solid var(--sapSeparatorColor, #d9d9d9);
  width: 100%;
  margin: 8px 0;
}

.form-checkbox {
  margin-left: -0.5rem;
}

.help-link {
  color: var(--sapLinkColor, #0064d9);
  text-decoration: none;
  font-size: var(--sapFontSize, 14px);
  display: inline-block;
}

.help-link:hover {
  text-decoration: underline;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}

/* Help panel ("Need help signing in") — lay the heading, prompt, select and
 * button row out as a flex column with one shared gap so the spacing between
 * every element is equal, matching the login form's rhythm. */
#help-panel,
#help-select-view,
#help-message-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#help-panel,
.login-form,
#help-message-view {
  animation: login-form-enter 0.22s ease-out both;
}

.register-link {
  font-size: 14px;
  color: #6a6d70;
}

.register-link a {
  color: #0a6ed1;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}

.login-footer {
  margin-top: auto;
  padding-top: 24px;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.login-left--wide > .login-footer {
  max-width: 100%;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: 12px;
  padding: 0 0 20px;
}

.footer-links a {
  color: var(--sapContent_LabelColor, #556b82);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
}

.footer-links a:hover {
  text-decoration: underline;
}

.login-notifications {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-notifications:empty {
  display: none;
}

.login-warning,
.login-error {
  background-color: #fef7f1;
  border-left: 4px solid #e9730c;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
  color: #32363a;
}

.login-error {
  background-color: #ffebeb;
  border-left-color: #bb0000;
}

.login-description {
  font-size: 14px;
  color: #32363a;
  margin: 0;
}

/* The thanks.message.* translations embed a legacy <h1 class="componentheading">
 * as the message heading (kept 1:1 with the legacy thank-you page, which renders a
 * single heading from the message itself). Style it to match the new .login-heading
 * so it fits the rebranded design. */
.login-description .componentheading {
  font-family: var(--sapFontFamily, "72");
  color: var(--sapObjectHeader_Title_TextColor, #131e29);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}

/* Register page */

/*
 * The register form uses UI5 <ui5-form>/<ui5-form-group>/<ui5-form-item>.
 * Their shadow DOM adds horizontal layout padding (.ui5-form-layout, the label
 * grid, etc.) that is not exposed via a CSS variable or ::part, so the section
 * headers and fields sat ~16px to the right of the page heading. A negative
 * inline-start margin on the <ui5-form> host is the only lever that escapes the
 * shadow layout; -1rem brings the content flush-left with the heading and logo
 * (see SIGSCX-928 design).
 */
.register-form ui5-form {
  margin-inline-start: -1rem;
}

/* Stretch the standalone fields (email, language, company, phone, country) to
 * the full form width so they line up with the full-width section separators
 * above — UI5 inputs/selects otherwise render at a narrower default width,
 * making the separator look longer than the field. The fields inside flex rows
 * (first/last name, salutation) already set width:100% inline. */
.register-form ui5-input,
.register-form ui5-select {
  width: 100%;
}

/* The register page's submit button uses the shared right-aligned default
 * from .submit-button-container, matching the other auth pages. */

/* Standard SAP body text for the register page's informational texts (privacy
 * message, T&C label, "already registered?" line, newsletter consent). Sets
 * both the direct font-size/color and the --sapFontSize/--sapTextColor custom
 * properties so it works on plain text elements AND on UI5 components like
 * <ui5-checkbox>, whose label reads those variables through its shadow DOM. */
.register-text {
  font-size: var(--sapFontSize, 14px);
  color: var(--sapTextColor, #131e29);
  --sapFontSize: 14px;
  --sapTextColor: #131e29;
}

/* Workspaces (tenant) selection view — tenantSelection.jsp. The workspaces are a
 * single-select UI5 list; each row is a <ui5-li>, SSO-enforced ones carry an inline
 * <ui5-tag>SSO</ui5-tag>. Scoped to the tenant form so it does not affect the shared
 * login/register layout. */
.tenant-form .tenant-list {
  width: 100%;
}

/* Bordered, rounded, scrollable box around the workspace list so a long list of
 * workspaces scrolls within a fixed height instead of pushing the footer off-screen. */
.tenant-list-container {
  border: 1px solid var(--sapList_BorderColor, #d9d9d9);
  border-radius: 8px;
  max-height: 340px;
  overflow-y: auto;
}

/* Footer row of the workspace selection: "Sign in to a different account" link on
 * the left, the Continue button on the right. */
.tenant-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.password-policy-hints {
  margin-top: 8px;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #6a6d70;
}

.policy-list li {
  padding: 2px 0;
}

.policy-list li::before {
  content: "○ ";
}

.policy-list li.policy-error {
  color: #bb0000;
}

.policy-list li.policy-error::before {
  content: "○ ";
}

/* SSO re-login box */
.sso-box {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

.sso-box-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.sso-title {
  font-family: var(--sapFontFamily, "72");
  font-size: var(--sapFontLargeSize, 16px);
  color: var(--sapTextColor, #131e29);
  margin: 0;
  font-weight: 700;
}

.sso-description {
  font-size: var(--sapFontSize, 14px);
  color: var(--sapContent_LabelColor, #6a7a8c);
  margin: 0;
  line-height: 1.4;
}

.sso-link {
  align-self: stretch;
  margin-top: 4px;
  text-decoration: none;
}

.sso-button {
  width: 100%;
}

/* Responsive */
@keyframes login-form-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-content {
  animation: login-form-enter 0.22s ease-out both;
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }

  .login-left,
  .login-left.login-left--wide {
    flex: 1;
    width: 100%;
    max-width: 100%;
    padding: 24px 24px 0;
    box-sizing: border-box;
  }

  .login-right {
    display: none;
  }

  .login-content {
    max-width: 100%;
  }

  .login-main,
  .login-main.login-main--full {
    max-width: 100%;
    margin: 0;
    width: 100%;
  }
}