/* =========================================================
   Shagrdiyah auth screen final polish
   ========================================================= */

:root {
  --sh-bg: #F5F3EE;
  --sh-card: rgba(255, 253, 248, 0.84);
  --sh-card-strong: rgba(255, 253, 248, 0.92);
  --sh-ink: #1C2B24;
  --sh-green: #1F5A46;
  --sh-green-dark: #164535;
  --sh-muted: #59665f;
  --sh-line: rgba(255, 255, 255, 0.36);
  --sh-shadow: 0 22px 55px rgba(7, 18, 15, 0.18);
}

/* Background */
body {
  background: #111 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../../images/riyadh-skyline-bg.jpg") center center / cover no-repeat !important;
  filter: brightness(0.78) saturate(1.03) !important;
  transform: scale(1.01);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 24%, rgba(31, 90, 70, 0.18), transparent 30rem),
    linear-gradient(90deg, rgba(8, 18, 15, 0.26), rgba(8, 18, 15, 0.10)),
    rgba(245, 243, 238, 0.10) !important;
}

.app-shell,
.main,
.view,
.auth-layout,
.content-body,
.auth-brand {
  position: relative;
  z-index: 1;
}

/* Auth page */
body:not(.is-authenticated) .main {
  min-height: 100vh;
  padding: clamp(16px, 3vw, 34px) !important;
}

body:not(.is-authenticated) .view {
  min-height: calc(100vh - 40px) !important;
  display: grid !important;
  align-items: center !important;
}

.auth-layout {
  direction: ltr;
  width: min(1120px, 100%);
  margin-inline: auto;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

/* Brand panel */
.auth-brand {
  direction: rtl;
  min-height: 470px !important;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(28px, 4vw, 52px) !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 28px !important;
  background: rgba(255, 253, 248, 0.70) !important;
  box-shadow: var(--sh-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  text-align: center !important;
  overflow: hidden;
}

/* Hide legacy hero artwork */
.auth-hero-image {
  display: none !important;
}

.auth-brand span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(31, 90, 70, 0.12);
  border-radius: 999px;
  color: var(--sh-green-dark) !important;
  background: rgba(255, 255, 255, 0.42);
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.auth-brand h2 {
  margin: 18px 0 10px !important;
  color: var(--sh-green) !important;
  font-size: clamp(2.75rem, 5.1vw, 4.25rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.auth-brand p {
  max-width: 430px !important;
  margin: 0 !important;
  color: var(--sh-muted) !important;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem) !important;
  line-height: 1.9 !important;
  font-weight: 800 !important;
}

/* Auth card */
.auth-layout .content-body,
.content-body {
  direction: rtl;
  width: 100%;
  max-width: 430px;
  justify-self: center;
  padding: clamp(22px, 3vw, 30px) !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 24px !important;
  background: var(--sh-card-strong) !important;
  box-shadow: var(--sh-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
}

.auth-layout .content-body h2,
.content-body h2 {
  margin-bottom: 1rem !important;
  color: var(--sh-green-dark) !important;
  text-align: center !important;
  font-size: clamp(1.65rem, 3vw, 2.05rem) !important;
  font-weight: 900 !important;
}

.input-group label {
  color: var(--sh-muted) !important;
  font-weight: 900 !important;
}

.auth-layout .input-group input,
.input-group input {
  min-height: 54px !important;
  border: 1px solid rgba(31, 90, 70, 0.14) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--sh-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.auth-layout .input-group input:focus,
.input-group input:focus {
  outline: none;
  border-color: rgba(31, 90, 70, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(31, 90, 70, 0.10);
}

.auth-layout .btn,
.btn {
  min-height: 52px !important;
  border-radius: 16px !important;
  color: #fffaf1 !important;
  background: linear-gradient(135deg, var(--sh-green), var(--sh-green-dark)) !important;
  box-shadow: 0 12px 24px rgba(31, 90, 70, 0.20);
  font-weight: 900 !important;
}

.auth-layout .btn:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(31, 90, 70, 0.24);
}

.link-text {
  margin-top: 1rem;
  color: var(--sh-muted) !important;
  text-align: center !important;
  font-weight: 700;
}

.link-text a {
  color: var(--sh-green-dark) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

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

/* Mobile */
@media (max-width: 960px) {
  .auth-layout {
    grid-template-columns: 1fr !important;
    width: min(520px, 100%);
  }

  .auth-brand {
    min-height: 260px !important;
    padding: 28px 22px !important;
  }

  .auth-layout .content-body,
  .content-body {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body:not(.is-authenticated) .main {
    padding: 14px !important;
  }

  .auth-brand {
    min-height: 230px !important;
    border-radius: 22px !important;
  }

  .auth-brand h2 {
    font-size: 2.7rem !important;
  }

  .auth-brand p {
    font-size: 1rem !important;
  }

  .auth-layout .content-body,
  .content-body {
    border-radius: 22px !important;
  }
}

/* Final component alignment */