/*
 * Rifd login — professional reference-matched layout
 * Loaded after rifd-login-polish.css so authentication behavior stays untouched.
 */

:root {
  --rifd-navy: #071b4f;
  --rifd-navy-soft: #14315f;
  --rifd-mint: #25b9a5;
  --rifd-mint-dark: #119985;
  --rifd-surface: #ffffff;
  --rifd-canvas: #f4f7fb;
  --rifd-border: #dbe3ec;
  --rifd-muted: #71809a;
}

.login-shell {
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(37, 185, 165, .06), transparent 28%),
    var(--rifd-canvas) !important;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

.login-shell *,
.login-shell *::before,
.login-shell *::after {
  box-sizing: border-box !important;
}

.login-shell .hospital-photo {
  background-position: center 48% !important;
  filter: saturate(.82) contrast(.98) brightness(1.04) !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(to right, #000 0 56.5%, transparent 60%) !important;
  mask-image: linear-gradient(to right, #000 0 56.5%, transparent 60%) !important;
}

.login-shell .hospital-photo::after {
  background:
    linear-gradient(180deg, rgba(247, 250, 254, .18) 0%, rgba(7, 27, 79, .02) 55%, rgba(7, 27, 79, .22) 100%),
    linear-gradient(90deg, rgba(7, 27, 79, .04), transparent 58%) !important;
}

/* Mirror the photo fade with the interface direction.
   Arabic: card on the right, photo remains clear on the left.
   English: card on the left, photo remains clear on the right. */
.login-shell.language-en .hospital-photo,
.language-en.login-shell .hospital-photo,
.language-en .login-shell .hospital-photo {
  -webkit-mask-image: linear-gradient(to left, #000 0 56.5%, transparent 60%) !important;
  mask-image: linear-gradient(to left, #000 0 56.5%, transparent 60%) !important;
}

.login-shell.language-en .hospital-photo::after,
.language-en.login-shell .hospital-photo::after,
.language-en .login-shell .hospital-photo::after {
  background:
    linear-gradient(180deg, rgba(247, 250, 254, .10) 0%, rgba(7, 27, 79, .02) 58%, rgba(7, 27, 79, .18) 100%),
    linear-gradient(270deg, rgba(7, 27, 79, .035), transparent 58%) !important;
}

@media (min-width: 901px) {
  .login-shell {
    grid-template-columns: 43.5% 56.5% !important;
    column-gap: 0 !important;
    align-items: center !important;
  }

  .login-card {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: calc(100% - 32px) !important;
    max-width: 640px !important;
    min-height: min(84svh, 820px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(34px, 4.6vh, 52px) clamp(38px, 4vw, 64px) 34px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow:
      0 28px 80px rgba(7, 27, 79, .13),
      0 3px 14px rgba(7, 27, 79, .06) !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .login-panel {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .login-message {
    grid-column: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    min-height: 100svh !important;
  }
}

.login-panel > .language-switch {
  position: fixed !important;
  inset-block-start: 20px !important;
  inset-inline-start: 26px !important;
  inset-inline-end: auto !important;
  z-index: 20 !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid rgba(7, 27, 79, .12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 8px 24px rgba(7, 27, 79, .08) !important;
  backdrop-filter: blur(14px) !important;
  display: inline-flex !important;
  width: auto !important;
}

.language-switch button {
  min-width: 78px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  color: var(--rifd-navy-soft) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.language-switch button.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--rifd-mint-dark), var(--rifd-mint)) !important;
  box-shadow: 0 6px 16px rgba(17, 153, 133, .24) !important;
}

.login-brand {
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto 10px !important;
}

.login-brand img {
  width: clamp(132px, 12vw, 174px) !important;
  max-height: 112px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 18px rgba(7, 27, 79, .08)) !important;
}

.login-brand small {
  margin-top: 6px !important;
  color: var(--rifd-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.welcome-copy {
  display: block !important;
  margin: 2px 0 18px !important;
  text-align: center !important;
}

.welcome-copy > p,
.login-panel .welcome-copy > p {
  color: var(--rifd-navy) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.75 !important;
}

.welcome-copy + form,
.login-panel form {
  width: 100% !important;
  margin-top: 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid #e6ebf2 !important;
  gap: 16px !important;
}

.login-panel label {
  color: var(--rifd-navy) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.login-panel input {
  height: 58px !important;
  margin-top: 8px !important;
  padding-inline: 50px 18px !important;
  border: 1px solid var(--rifd-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--rifd-navy) !important;
  font-size: 15px !important;
  box-shadow: 0 2px 7px rgba(7, 27, 79, .025) !important;
}

.login-panel input::placeholder {
  color: #9da8b9 !important;
}

.login-panel input:hover {
  border-color: #b8c6d7 !important;
}

.login-panel input:focus {
  border-color: var(--rifd-mint) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(37, 185, 165, .12) !important;
}

.field-icon,
.password-toggle {
  color: #72829a !important;
}

.submit-login {
  height: 60px !important;
  margin-top: 6px !important;
  border-radius: 13px !important;
  background: linear-gradient(105deg, var(--rifd-mint-dark), #29c3ae) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 13px 28px rgba(17, 153, 133, .24) !important;
}

.submit-login::before {
  display: none !important;
}

.submit-login:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 32px rgba(17, 153, 133, .30) !important;
}

.privacy-note {
  margin-top: 14px !important;
  color: var(--rifd-muted) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}

.setup-link {
  margin-top: 16px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-top: 1px solid #e6ebf2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--rifd-navy) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.setup-link:hover {
  background: rgba(37, 185, 165, .055) !important;
  color: var(--rifd-mint-dark) !important;
}

.login-message {
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(64px, 9vh, 92px) 8vw 120px !important;
  color: var(--rifd-navy) !important;
  text-align: center !important;
  text-shadow: none !important;
}

.login-message::before {
  content: none !important;
}

.login-message h2 {
  max-width: 560px !important;
  margin: 0 auto 12px !important;
  color: var(--rifd-navy) !important;
  font-size: clamp(23px, 2vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9) !important;
}

.login-message h2::before {
  content: "رفد" !important;
  display: block !important;
  margin-bottom: 14px !important;
  color: var(--rifd-navy) !important;
  font-size: clamp(72px, 7vw, 108px) !important;
  font-weight: 950 !important;
  line-height: .95 !important;
  letter-spacing: -.07em !important;
  text-shadow: 0 3px 10px rgba(255, 255, 255, .82) !important;
}

.language-en .login-message h2::before {
  content: "RIFD" !important;
  letter-spacing: -.04em !important;
}

.login-message p {
  max-width: 510px !important;
  margin: 0 auto !important;
  color: var(--rifd-navy-soft) !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9) !important;
}

.login-footer {
  height: 52px !important;
  padding-inline: 4vw !important;
  background: rgba(255, 255, 255, .88) !important;
  border-top: 1px solid rgba(7, 27, 79, .07) !important;
  color: var(--rifd-navy-soft) !important;
  font-size: 11px !important;
  text-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

@media (max-height: 820px) and (min-width: 901px) {
  .login-card {
    min-height: calc(100svh - 42px) !important;
    padding-block: 26px 22px !important;
  }
  .login-brand img {
    width: 126px !important;
    max-height: 84px !important;
  }
  .welcome-copy {
    margin-bottom: 10px !important;
  }
  .login-panel input {
    height: 50px !important;
  }
  .submit-login {
    height: 52px !important;
  }
}

@media (max-width: 900px) {
  .login-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background:
      linear-gradient(rgba(244, 247, 251, .86), rgba(244, 247, 251, .94)),
      url("/hospital.jpeg") center / cover no-repeat !important;
    overflow-y: auto !important;
  }

  .login-shell .hospital-photo {
    display: none !important;
  }

  .login-card {
    width: min(100%, 520px) !important;
    min-height: 0 !important;
    margin: 54px auto 18px !important;
    padding: 34px 24px 26px !important;
    border: 1px solid rgba(255, 255, 255, .92) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 24px 60px rgba(7, 27, 79, .15) !important;
  }

  .login-panel > .language-switch {
    inset-block-start: 14px !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
  }

  .login-brand img {
    width: 132px !important;
    max-height: 90px !important;
  }

  .welcome-copy > p,
  .login-panel .welcome-copy > p {
    font-size: 14px !important;
  }

  .login-panel input {
    height: 54px !important;
  }

  .submit-login {
    height: 56px !important;
  }

  .login-footer {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .login-shell {
    padding: 12px !important;
  }

  .login-card {
    margin-top: 50px !important;
    padding: 28px 18px 22px !important;
    border-radius: 20px !important;
  }

  .language-switch button {
    min-width: 70px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-login,
  .language-switch button {
    transition: none !important;
  }
}