body.umsaz-sis-login {
  --sis-navy: #12344f;
  --sis-copper: #a95e35;
  --sis-amber: #d79a48;
  --sis-cream: #fff9f0;
  --sis-sand: #f3e5d1;
  min-height: 100vh;
  overflow-x: hidden;
  color: #243348;
  background: var(--sis-cream);
}

body.umsaz-sis-login .navbar,
body.umsaz-sis-login footer,
body.umsaz-sis-login .web-footer {
  display: none !important;
}

body.umsaz-sis-login main,
body.umsaz-sis-login .page_content,
body.umsaz-sis-login .page-content-wrapper {
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.umsaz-sis-brand-panel {
  position: fixed;
  z-index: 0;
  inset: 0 42% 0 0;
  overflow: hidden;
  color: #fff;
  background:
    url(
      "/assets/umsaz_sis/images/umsaz-sis-login-background-v1.webp"
    )
    left center / auto 125% no-repeat;
}

.umsaz-sis-brand-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(20, 34, 46, 0) 10%,
      rgba(28, 31, 30, 0.06) 58%,
      rgba(18, 31, 43, 0.56) 100%
    ),
    linear-gradient(
      90deg,
      rgba(102, 55, 30, 0.18),
      transparent 56%
    );
}

.umsaz-sis-brand-copy {
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: 7%;
  left: 7%;
  max-width: 690px;
  text-shadow: 0 2px 16px rgba(15, 22, 28, 0.36);
}

.umsaz-sis-wordmark {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 244, 218, 0.68);
  border-radius: 999px;
  color: #fff4d8;
  background: rgba(55, 39, 28, 0.28);
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.umsaz-sis-eyebrow {
  margin-bottom: 10px;
  color: #f3c96f;
  font-size: clamp(0.9rem, 1.22vw, 1.08rem);
  font-weight: 750;
  letter-spacing: 0.075em;
  line-height: 1.35;
  text-transform: uppercase;
}

.umsaz-sis-brand-copy h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
}

.umsaz-sis-brand-copy p {
  max-width: 620px;
  margin: 0;
  color: #fff7ea;
  font-size: clamp(0.96rem, 1.3vw, 1.13rem);
  line-height: 1.55;
}

.umsaz-sis-feature-list {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 9px;
}

.umsaz-sis-feature-list span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 241, 218, 0.38);
  border-radius: 999px;
  color: #fff8ec;
  background: rgba(18, 34, 47, 0.36);
  font-size: 0.78rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

body.umsaz-sis-login section.for-login,
body.umsaz-sis-login section.for-email-login,
body.umsaz-sis-login section.for-signup,
body.umsaz-sis-login section.for-forgot,
body.umsaz-sis-login section.for-login-with-email-link {
  position: relative;
  z-index: 2;
  width: 42%;
  min-height: 100vh;
  margin-right: 0;
  margin-left: auto;
  padding: 64px 7% 48px;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(215, 154, 72, 0.16),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #fffdf8 0%,
      var(--sis-cream) 52%,
      #f7ead8 100%
    );
}

body.umsaz-sis-login .login-content.page-card {
  width: min(100%, 420px);
  margin: auto !important;
  padding: 30px 30px 24px !important;
  border: 1px solid rgba(174, 128, 82, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.91) !important;
  box-shadow:
    0 24px 65px rgba(91, 57, 34, 0.16),
    0 4px 15px rgba(32, 47, 61, 0.08) !important;
  backdrop-filter: blur(13px);
}

body.umsaz-sis-login .page-card-head {
  margin-bottom: 28px;
  align-items: center;
  overflow: visible;
  text-align: center;
}

body.umsaz-sis-login .page-card-head .app-logo {
  width: 112px !important;
  height: 112px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain;
  background: transparent !important;
  transform: none;
}

body.umsaz-sis-login .page-card-head h4 {
  color: var(--sis-navy);
  font-size: 1.16rem;
  font-weight: 800;
}

body.umsaz-sis-login .page-card-subtitle {
  color: #6c7784;
}

body.umsaz-sis-login .form-label {
  color: #3f4e60;
  font-weight: 650;
}

body.umsaz-sis-login .form-control {
  min-height: 43px;
  border-color: #dfcfbb;
  border-radius: 9px;
  background: #fffdf9;
}

body.umsaz-sis-login .form-control:focus {
  border-color: var(--sis-amber);
  box-shadow: 0 0 0 3px rgba(215, 154, 72, 0.16);
}

body.umsaz-sis-login .btn-login {
  min-height: 43px;
  border-color: var(--sis-navy);
  border-radius: 9px;
  color: #fff;
  background: var(--sis-navy);
  font-weight: 750;
}

body.umsaz-sis-login .btn-login:hover {
  border-color: #0b263c;
  background: #0b263c;
}

body.umsaz-sis-login
.umsaz-sis-microsoft-button {
  min-height: 43px;
  border: 1px solid #b86a3d !important;
  border-radius: 9px !important;
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      #b9683b,
      #d68a4c
    ) !important;
  font-weight: 750 !important;
  box-shadow: 0 5px 14px rgba(169, 94, 53, 0.2);
}

body.umsaz-sis-login
.umsaz-sis-microsoft-button:hover {
  background:
    linear-gradient(
      135deg,
      #a75731,
      #c9793f
    ) !important;
}

.umsaz-sis-security-note {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ede1d1;
  color: #7b736a;
  font-size: 0.73rem;
  line-height: 1.45;
  text-align: center;
}

body.umsaz-sis-login .forgot-password-message a,
body.umsaz-sis-login .sign-up-message a {
  color: var(--sis-copper);
}

@media (max-width: 900px) {
  .umsaz-sis-brand-panel {
    inset: 0;
    opacity: 0.24;
  }

  .umsaz-sis-brand-copy {
    display: none;
  }

  body.umsaz-sis-login section.for-login,
  body.umsaz-sis-login section.for-email-login,
  body.umsaz-sis-login section.for-signup,
  body.umsaz-sis-login section.for-forgot,
  body.umsaz-sis-login
  section.for-login-with-email-link {
    width: 100%;
    padding: 40px 18px;
    background:
      linear-gradient(
        rgba(255, 249, 240, 0.88),
        rgba(255, 249, 240, 0.96)
      );
  }

  body.umsaz-sis-login .login-content.page-card {
    width: min(100%, 430px);
  }
}