/*Theme Start*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@500;700&display=swap');

:root {
  --accent-color: #002145;
  --accent-background-secondary: #002145;
  --background-primary: #ffffff;
  --background-secondary: #002145;
  --text-primary: #1a1a2e;
  --text-secondary: #ffffff;
  --ubc-blue: #002145;
  --ubc-blue-light: #0055B7;
  --ubc-teal: #00A7E1;
}
/*Theme End*/

/* ===== KILL CrushFTP default theme ===== */
html, html[data-theme], html[data-theme="light"] {
  background: #ffffff !important;
}

/* Override body classes that CrushFTP adds */
body,
body.login-page,
body.has-custom-footer,
body.login-page.has-custom-footer {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1a1a2e !important;
  overflow-x: hidden;
  background: #ffffff !important;
  position: relative !important;
}

/* ===== HIDE cosmetic chrome ===== */
section#login .auth-banner-container,
.auth-banner-container,
div.auth-banner-container,
.is-hidden-mobile.auth-banner-container,
.bg-accentSecondary.auth-banner-container,
#auth-banner,
.multi-theme-icon-container,
w-theme.multi-theme-icon-container,
.language-dropdown,
w-language.language-dropdown,
#loginFormCard .content-line {
  display: none !important;
  width: 0 !important; max-width: 0 !important; height: 0 !important;
  overflow: hidden !important; visibility: hidden !important; opacity: 0 !important;
  flex: 0 0 0 !important; padding: 0 !important; margin: 0 !important; border: none !important;
}

/* ===== LOGIN SECTION → LEFT panel (WHITE) ===== */
section#login,
section#login.auth-section,
section#login.is-hidden,
.auth-section,
#login,
body.login-page section#login,
body.has-custom-footer section#login {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  height: auto !important;
  width: 100% !important;
  padding: 40px 48px !important;
  visibility: visible !important;
  opacity: 1 !important;
  order: 1 !important;
  background: #ffffff !important;
  position: relative !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  max-width: none !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

section#login::before,
section#login::after,
.auth-section::before,
.auth-section::after {
  display: none !important;
  content: none !important;
}

/* Respect CrushFTP's is-hidden on child elements (e.g. #loginForm when SSO-only) */
section#login .is-hidden,
#loginFormCard .is-hidden,
#page-columns .is-hidden,
#loginForm.is-hidden,
#crushAuthContainer .is-hidden,
.crush-auth-container > .is-hidden {
  display: none !important;
}

/* When login form is hidden (SSO-only), also hide divider + original SAML/OIDC buttons */
/* Only samlSigninButton_1 ("SSO Login") should remain visible */
#loginForm.is-hidden ~ #crushAuthContainer .continue-label,
#loginForm.is-hidden ~ .crush-auth-container .continue-label,
#loginForm.is-hidden ~ #crushAuthContainer #samlSigninButton,
#loginForm.is-hidden ~ #crushAuthContainer #oidcSigninButton,
#loginForm.is-hidden ~ .crush-auth-container #samlSigninButton,
#loginForm.is-hidden ~ .crush-auth-container #oidcSigninButton {
  display: none !important;
}

/* Page columns */
#page-columns,
section#login #page-columns,
div#page-columns,
section#login div#page-columns {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 380px !important;
  min-height: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ===== Header — logo + welcome text FIRST ===== */
.header-container,
div.header-container,
.header-container.is-absolute,
div.header-container.is-absolute,
section#login .header-container,
#page-columns > .header-container,
#login .header-container {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important; text-align: center !important;
  margin-bottom: 20px !important; z-index: 1 !important; transform: none !important;
  order: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Auth form section SECOND */
.auth-form-section,
div.auth-form-section,
section#login .auth-form-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  order: 2 !important;
}

.auth-form-container,
section#login .auth-form-container {
  max-width: 380px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ===== LOGIN CARD — fully transparent ===== */
#loginFormCard,
section#login #loginFormCard,
.auth-form-container #loginFormCard,
section#login .auth-form-container #loginFormCard {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

#loginFormCard::before,
#loginFormCard::after {
  display: none !important;
  content: none !important;
}

/* Logo inside form — hidden (logo is in header) */
#loginFormCard > .is-flex.is-justify-content-center.mb-5 {
  display: none !important;
}

.logo, w-image.logo, w-image.logo img, #loginFormCard img[alt="crush-logo"] {
  height: 86px !important; width: auto !important; max-width: 350px !important; object-fit: contain !important;
}

/* Header logo */
.fom-header-logo { margin-bottom: 20px; }
.fom-header-logo img { height: 86px; width: auto; max-width: 350px; object-fit: contain; display: block; margin: 0 auto; }

/* Login form */
#loginFormCard > form,
#loginFormCard > #loginForm,
#loginForm {
  width: 100% !important;
}

/* Crush auth container */
#crushAuthContainer,
.crush-auth-container {
  position: relative !important;
  z-index: 2 !important;
}

/* ===== Form labels ===== */
section#login label,
#loginForm label,
section#login .input-label,
.input-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #002145 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ===== Inputs ===== */
section#login .input,
#loginForm .input,
#loginFormCard .input,
.auth-form-container .input,
section#login input.input {
  border-radius: 10px !important;
  border: 1.5px solid rgba(0,33,69,.1) !important;
  padding: 13px 16px 13px 44px !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  background: #fafbfd !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  box-shadow: none !important;
  color: #1a1a2e !important;
  height: auto !important;
  width: 100% !important;
}

section#login .input::placeholder { color: rgba(0,33,69,.25) !important; }
section#login .input:focus {
  border-color: #0055B7 !important;
  box-shadow: 0 0 0 3px rgba(0,85,183,.1) !important;
  outline: none !important;
  background: #fff !important;
}

section#login .control.has-icons-left .icon.is-left { color: rgba(0,33,69,.25) !important; }

/* Remember / Forgot */
section#login #rememberPanel label { font-size: 13px !important; text-transform: none !important; font-weight: 400 !important; color: rgba(0,33,69,.5) !important; }
#rememberPanel input[type="checkbox"] { accent-color: #002145; width: 15px; height: 15px; }
section#login #forgotPasswordRow .forgot-link { font-size: 13px !important; color: #0055B7 !important; background: none !important; border: none !important; }

/* ===== Sign In button ===== */
section#login #sign-in-button,
#sign-in-button,
section#login #submitButtonRow .primary-button,
#submitButtonRow .primary-button {
  background: linear-gradient(135deg, #002145, #0055B7) !important;
  color: #fff !important; border: none !important; border-radius: 12px !important;
  padding: 14px 24px !important; font-size: 15px !important; font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,33,69,.18) !important;
  position: relative !important; overflow: hidden !important;
}
#sign-in-button::after {
  content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent) !important;
  transition: left .5s ease !important;
}
#sign-in-button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(0,33,69,.25) !important; }
#sign-in-button:hover::after { left: 100% !important; }

/* "Or continue with" */
.crush-auth-container .continue-label { margin-top: 4px !important; margin-bottom: 4px !important; }
.crush-auth-container .continue-label .content-line {
  display: block !important;
  border-top: 1px solid rgba(0,33,69,.07) !important;
  background: none !important; height: 0 !important; flex: 1; align-self: center;
  width: auto !important; max-width: none !important; visibility: visible !important; opacity: 1 !important;
  overflow: visible !important; margin: 0 !important; padding: 0 !important;
}
.crush-auth-container .continue-label p {
  font-family: 'DM Sans', sans-serif !important; font-size: 11px !important;
  color: rgba(0,33,69,.25) !important; text-transform: uppercase !important; letter-spacing: .08em !important;
}

/* ===== SSO buttons ===== */
section#login [id^="samlSigninButton"],
section#login [id^="oidcSigninButton"],
[id^="samlSigninButton"],
[id^="oidcSigninButton"] {
  align-items: center !important; justify-content: center !important; width: 100% !important;
  padding: 14px 24px !important; border-radius: 12px !important;
  cursor: pointer !important;
  border: none !important;
  background: linear-gradient(135deg, #002145, #0055B7) !important;
  min-height: 50px !important;
  box-shadow: 0 4px 16px rgba(0,33,69,.18) !important;
  position: relative !important; overflow: hidden !important;
  font-size: 15px !important; font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #fff !important;
  display: flex !important;
  text-align: center !important;
}
[id^="samlSigninButton"] span,
[id^="oidcSigninButton"] span {
  color: #fff !important; font-size: 15px !important;
  font-weight: 600 !important; font-family: 'DM Sans', sans-serif !important;
}
[id^="samlSigninButton"]::after,
[id^="oidcSigninButton"]::after {
  content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent) !important;
  transition: left .5s ease !important;
}
[id^="samlSigninButton"]:hover,
[id^="oidcSigninButton"]:hover {
  transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(0,33,69,.25) !important;
}
[id^="samlSigninButton"]:hover::after,
[id^="oidcSigninButton"]:hover::after { left: 100% !important; }

/* Social buttons */
.social-continue-btn { border-radius: 10px !important; border: 1.5px solid rgba(0,33,69,.1) !important; background: #fff !important; }

/* Continue-as */
#userLoggedIn a { color: #0055B7 !important; text-decoration: none; }

/* Reset / Change password */
#resetFormCard, #changePasswordFormCard {
  background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
#resetFormCard::before, #changePasswordFormCard::before { display: none !important; }
.forgot-password-title { font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important; color: #002145 !important; }
.reset-password-label { font-family: 'DM Sans', sans-serif !important; color: rgba(0,33,69,.55) !important; }
.back-to-login-label { color: #0055B7 !important; background: none !important; border: none !important; }
#resetFormCard .primary-button:not(.is-bg-none),
#changePasswordFormCard .primary-button:not(.is-bg-none):not(.is-bordered) {
  background: linear-gradient(135deg, #002145, #0055B7) !important;
  color: #fff !important; border: none !important; border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important;
}
#resetFormCard svg { color: #0055B7; }

/* Cookie bar — just style it, let CrushFTP handle show/hide */
#acceptCookieNotification {
  font-family: 'DM Sans', sans-serif !important;
  z-index: 9999 !important;
}

/* reCAPTCHA badge — ensure it's visible */
.grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9998 !important;
}

/* ===== OTP / Modal styling ===== */
.modal-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 64px rgba(0,33,69,.2) !important;
  border: none !important;
  max-width: 420px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.modal-card-head {
  background: linear-gradient(135deg, #002145, #0055B7) !important;
  border-bottom: none !important;
  padding: 20px 24px !important;
}

.modal-card-title,
.modal-card-title.text-primaryMain,
.modal-card-head .modal-card-title,
.modal-card-head .text-primaryMain {
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.modal-card-body {
  background: #ffffff !important;
  padding: 24px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.modal-card-body .label,
.modal-card-body label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #002145 !important;
}

.modal-card-body .input {
  border-radius: 10px !important;
  border: 1.5px solid rgba(0,33,69,.1) !important;
  padding: 13px 16px !important;
  font-size: 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  background: #fafbfd !important;
  color: #1a1a2e !important;
  letter-spacing: .15em !important;
}

.modal-card-body .input:focus {
  border-color: #0055B7 !important;
  box-shadow: 0 0 0 3px rgba(0,85,183,.1) !important;
  outline: none !important;
  background: #fff !important;
}

.modal-card-foot {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,33,69,.06) !important;
  padding: 16px 24px !important;
}

.modal-card-foot .primary-button {
  background: linear-gradient(135deg, #002145, #0055B7) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,33,69,.15) !important;
}

.modal-card-foot .primary-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,33,69,.24) !important;
}

.modal-background {
  background: rgba(0,33,69,.4) !important;
}

/* ===== HEADER ===== */
.fom-login-header { text-align: center; margin-bottom: 20px; }
.fom-login-header h2 { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 600; color: #002145; margin: 0 0 2px; }
.fom-login-header p { font-size: 13.5px; color: rgba(0,33,69,.4); margin: 0; }

/* ===== FOOTER → RIGHT panel (gray-blue) ===== */
/* Must override CrushFTP's inline style AND .has-custom-footer positioning */
#customFooterLoginPageContainer,
div#customFooterLoginPageContainer,
div#customFooterLoginPageContainer[style],
body.has-custom-footer #customFooterLoginPageContainer,
body.login-page #customFooterLoginPageContainer,
body.login-page.has-custom-footer #customFooterLoginPageContainer,
body.has-custom-footer div#customFooterLoginPageContainer[style],
.has-custom-footer #customFooterLoginPageContainer {
  background: #f0f4f8 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 48px 48px 32px !important;
  min-height: 100vh !important;
  position: relative !important;
  position: static !important;
  order: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  inset: auto !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  clear: both !important;
}

#customFooterLoginPageContainer::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0,85,183,.03), transparent) !important;
  pointer-events: none !important;
}

#customFooterLoginPageContainer::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px;
  background: rgba(0,33,69,.06);
}

/* Info panel inner */
.fom-left-inner {
  max-width: 460px; width: 100%; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
  text-align: left;
}

.fom-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.fom-brand-icon {
  width: 52px; height: 52px; border-radius: 14px; background: #002145;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fom-brand-icon svg { width: 26px; height: 26px; color: #fff; }
.fom-brand h1 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: #002145; line-height: 1.15; margin: 0; }
.fom-brand-sub { font-size: 15px; color: rgba(0,33,69,.5); margin-top: 2px; }

.fom-tagline { font-size: 16px; color: rgba(0,33,69,.55); line-height: 1.7; margin-bottom: 36px; text-align: left; }
.fom-tagline strong { color: #002145; font-weight: 600; }

.fom-how-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,33,69,.3); margin-bottom: 16px; text-align: left; }
.fom-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
.fom-how-item {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(0,33,69,.04);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: rgba(0,33,69,.6); transition: all .2s;
}
.fom-how-item:hover { background: rgba(255,255,255,.85); border-color: rgba(0,33,69,.08); }
.fom-how-icon {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(0,33,69,.05);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fom-how-icon svg { width: 16px; height: 16px; color: rgba(0,33,69,.35); }

.fom-divider { height: 1px; background: rgba(0,33,69,.07); margin: 0 0 28px; }

.fom-policy { margin-bottom: 18px; padding-left: 16px; border-left: 3px solid; }
.fom-policy--warn { border-left-color: #E6A817; }
.fom-policy--info { border-left-color: #0055B7; }
.fom-policy-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 3px; text-align: left; }
.fom-policy--warn .fom-policy-label { color: #B8860B; }
.fom-policy--info .fom-policy-label { color: #0055B7; }
.fom-policy p { font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.6; color: rgba(0,33,69,.55); margin: 0; text-align: left; }
.fom-policy strong { color: #002145; font-weight: 600; }

.fom-left-footer {
  max-width: 460px; width: 100%; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(0,33,69,.42);
  padding-top: 24px; margin-top: auto; flex-shrink: 0; position: relative; z-index: 1;
}
.fom-left-footer a { color: #0055B7; text-decoration: none; font-weight: 500; }
.fom-left-footer a:hover { text-decoration: underline; }

/* ===== MOBILE ===== */
@media (max-width: 900px) {
  body, body.login-page, body.has-custom-footer, body.login-page.has-custom-footer {
    display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important;
  }
  #customFooterLoginPageContainer,
  div#customFooterLoginPageContainer,
  div#customFooterLoginPageContainer[style],
  body.has-custom-footer #customFooterLoginPageContainer {
    order: 1 !important; min-height: auto !important; padding: 32px 24px 24px !important;
    grid-column: auto !important; grid-row: auto !important;
  }
  #customFooterLoginPageContainer::after { display: none; }
  section#login, .auth-section, #login, body.login-page section#login {
    order: 2 !important; min-height: auto !important; padding: 24px 24px 32px !important;
    grid-column: auto !important; grid-row: auto !important;
  }
  #page-columns { max-width: 100% !important; }
  .fom-how-grid { grid-template-columns: 1fr; }
  .fom-brand h1 { font-size: 24px; }
}

.fom-left-inner {
  opacity: 1 !important;
}