/**
 * @file
 * Custom Horizon Login Page Styling
 * Matches the horizon-crm signin page design (Figma node 6336-6691)
 * Features diagonal split layout with responsive stacking on mobile
 */

/* ============================================
   BASE LAYOUT - Full viewport, flexbox
   ============================================ */

/* Main container - full viewport with flexbox */
body.gin-login .user-form-page {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ============================================
   DESKTOP LAYOUT - 65% / 35% split
   ============================================ */

/* Orange gradient wallpaper background with diagonal clip - LEFT side */
body.gin-login .user-form-page__wallpaper {
  background: linear-gradient(45deg, #d32f2f, #f5a623);
  position: relative;
  /* Diagonal cuts from top-right (100%) to bottom (80%) */
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  flex: 0 0 65%;
  min-height: 100vh;
  animation: slide-in-top .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Hide any wallpaper images injected by gin_login JS */
body.gin-login .user-form-page__wallpaper img {
  display: none;
}

/* Stars pattern overlay on wallpaper */
body.gin-login .user-form-page__wallpaper::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background-image: url('../images/gin-login/stars.svg');
  background-repeat: repeat;
  background-size: 200px 350px;
  background-position: center;
  transform: rotate(10deg);
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Centered HRZN logo on wallpaper */
body.gin-login .user-form-page__wallpaper::after {
  content: "";
  position: absolute;
  background-image: url('../images/gin-login/logo--white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 500px;
  height: 240px;
  top: 50%;
  left: 40%;
  transform: translate(-30%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: fade-scale-in .8s cubic-bezier(.16, 1, .3, 1) .3s forwards;
}

/* Form panel - white background - RIGHT side */
body.gin-login .user-form-page__user-form {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
  flex: 1;
  min-height: 100vh;
}

/* Center the form content */
body.gin-login .user-form-page__user-form .layout-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px 0 0;
  opacity: 0;
  animation: fade-slide-up .6s cubic-bezier(.16, 1, .3, 1) .5s forwards;
}

/* ============================================
   FORM STYLING
   ============================================ */

/* Hide icon/badge */
body.gin-login .user-form-page__user-form .content-header {
  display: none;
}

/* Black login button - override all states and transitions */
body.gin-login .button--primary,
body.gin-login .button-login,
body.gin-login .form-actions .button--primary,
body.gin-login .form-actions .button-login {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  border-radius: 6px;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

body.gin-login .button--primary:hover,
body.gin-login .button-login:hover,
body.gin-login .form-actions .button--primary:hover,
body.gin-login .form-actions .button-login:hover {
  background-color: #171717 !important;
  border-color: #171717 !important;
  box-shadow: none !important;
}

body.gin-login .button--primary:active,
body.gin-login .button-login:active,
body.gin-login .button--primary:focus,
body.gin-login .button-login:focus,
body.gin-login .form-actions .button--primary:active,
body.gin-login .form-actions .button-login:active,
body.gin-login .form-actions .button--primary:focus,
body.gin-login .form-actions .button-login:focus {
  background-color: #262626 !important;
  border-color: #262626 !important;
  box-shadow: none !important;
}

/* Links styling */
body.gin-login .link {
  color: #000000;
}

body.gin-login .link:hover {
  color: #000000;
  text-decoration: underline;
}

body.gin-login .messages__wrapper a {
  color: #ebd0d1;
}

/* Page title styling */
body.gin-login .user-form-page__page-title {
  color: #111827;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 32px;
}

/* Form elements focus state */
body.gin-login .form-element:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}

/* ============================================
   MOBILE LAYOUT - Stacked vertically
   ============================================ */

@media (max-width: 1024px) {
  /* Stack columns vertically using flexbox */
  body.gin-login .user-form-page {
    flex-direction: column;
  }

  body.gin-login .user-form-page__user-form .layout-container {
    padding: 0;
  }

  /* Branding panel - full width at top with diagonal bottom edge */
  body.gin-login .user-form-page__wallpaper {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 40vh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  /* Adjust logo position for mobile */
  body.gin-login .user-form-page__wallpaper::after {
    width: 300px;
    height: 145px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation-name: fade-scale-in-mobile;
  }

  /* Form panel - full width below, flex to fill remaining space */
  body.gin-login .user-form-page__user-form {
    flex: 1;
    width: 100%;
    min-height: 50vh;
    padding: 40px 24px;
  }

  /* Smaller title on mobile */
  body.gin-login .user-form-page__page-title {
    font-size: 28px;
    text-align: center;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  body.gin-login .user-form-page__wallpaper {
    display: block;
    min-height: 45vh;
  }

  body.gin-login .user-form-page__wallpaper::after {
    width: 260px;
    height: 125px;
  }

  body.gin-login .user-form-page__user-form {
    padding: 32px 20px;
  }

  body.gin-login .user-form-page__page-title {
    font-size: 24px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes slide-in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-scale-in {
  0% {
    transform: translate(-30%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-30%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-scale-in-mobile {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes fade-slide-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}