/* =====================================================================
   Wuestenrot login theme  -  CrushFTP 11.W.1188 (new-ui)
   ---------------------------------------------------------------------
   ===================================================================== */

/* 1. Recolor the accent system: CrushFTP gold -> Wuestenrot red ------- */
:root {
  --color-104: #DC143C;              /* accent base color            */
  --accent-color: #DC143C;
  --color-107: #fdecef;              /* light-accent background      */
  --accent-background-primary: #fdecef;
  --accent-background-secondary: #fdecef;
}

/* 2. Page background: soft gradient behind the card ------------------- */
body.login-page,
body.login-page #login.auth-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

/* let the gradient show through the form column (drop vendor white)    */
body.login-page .auth-form-section {
  background: transparent !important;
}

/* hide the marketing banner, the light/dark theme toggle and the
   language switcher -> clean single centered card                      */
body.login-page .auth-banner-container,
body.login-page w-theme,
body.login-page w-language {
  display: none !important;
}

/* 3. The card -------------------------------------------------------- */
body.login-page .auth-section .auth-form-section .auth-form-container {
  max-width: 24rem !important;          /* prod-like width -> shorter fields */
  background: #ffffff !important;
  border: 4px solid #DC143C !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(220, 20, 60, 0.25) !important;
  padding: 2.5rem !important;
  margin: 1rem auto !important;
}

/* 4. Logo + title ---------------------------------------------------- */
body.login-page .custom-logo.logo {
  height: 60px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}
body.login-page .custom-login-title {
  color: #DC143C !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 1.75rem !important;
}

/* 5. Inputs ---------------------------------------------------------- */
body.login-page .auth-form-container form .input {
  border: 2px solid #e2e2e2 !important;
  border-radius: 6px !important;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem !important;   /* left gutter for the user/lock icon */
  font-size: 1rem !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
/* the password field also carries the show/hide eye on the right */
body.login-page .auth-form-container form .has-icons-right .input {
  padding-right: 2.6rem !important;
}
body.login-page .auth-form-container form .input:focus {
  border-color: #DC143C !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.12) !important;
  outline: none !important;
}
body.login-page label,
body.login-page .input-label {
  font-weight: 600 !important;
  color: #333333 !important;
}
body.login-page input[type="checkbox"] {
  accent-color: #DC143C !important;
}

/* 6. Buttons --------------------------------------------------------- */
/* base puts DARK text on the accent fill; on red we want white         */
body.login-page .primary-button {
  color: #ffffff !important;
  font-weight: 600 !important;
}
body.login-page #submitButtonRow .primary-button {
  padding: 0.8rem 1rem !important;
  font-size: 1rem !important;
}
/* text-only / bordered actions (forgot pw, back, cancel) stay red      */
body.login-page .primary-button.is-bordered {
  color: #DC143C !important;
  border-color: #DC143C !important;
  background-color: transparent !important;
}
body.login-page .primary-button.is-bg-none,
body.login-page .forgot-link {
  color: #DC143C !important;
}

/* 7. Cookie bar: red with white buttons (positioning stays vendor's) - */
body.login-page .accept-cookie-notification {
  background-color: #DC143C !important;
  color: #ffffff !important;
  border-top: 2px solid #B22222 !important;
}
body.login-page .accept-cookie-notification .link {
  color: #ffe4e9 !important;
  text-decoration: underline !important;
}
body.login-page .accept-cookie-notification .primary-button {
  background-color: #ffffff !important;
  color: #DC143C !important;
  border: 1px solid #ffffff !important;
}
body.login-page .accept-cookie-notification .primary-button.is-bordered {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* 8. Field icons + password show/hide toggle ------------------------- */
body.login-page .control .icon {
  color: #9aa0a6 !important;
}
/* darker so the user / lock pictograms read clearly in their gutter */
body.login-page .control.has-icons-left .icon.is-left {
  color: #6b7280 !important;
}
body.login-page .password-toggle,
body.login-page .password-toggle:hover {
  color: #DC143C !important;
}

/* 9. Remaining links / accent text ----------------------------------- */
body.login-page .text-accentMain,
body.login-page .link {
  color: #DC143C !important;
}

/* 10. Features intentionally disabled for end users -------------------
   Force-hidden (NOT removed from the DOM): CrushFTP's login.js binds to
   these IDs and calls .el() on some of them, so deleting the markup
   throws null-reference errors that break the whole login. display:none
   !important also wins over the JS that un-hides OIDC when configured.
     - forgot-password button + password-reset card
     - forced change-password card
     - external logins ("Or continue with": OIDC / SAML / social)        */
body.login-page #forgotPasswordRow,
body.login-page #resetFormCard,
body.login-page #changePasswordFormCard,
body.login-page #crushAuthContainer {
  display: none !important;
}