/* assets/styles/loginpage/login.scss */
@use "~/assets/scss/_colors.scss" as *;

/* Main Background - Using Primary Color */
.login-background {
  background: $primary-500; /* Primary-500: #567EE7 */
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.login-background::before {
  /* No radial gradients */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: none;
}

/* Floating Medical Icons - Subtle on Primary Background */
.floating-medical-icon {
  position: absolute;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  z-index: 1;
  width: fit-content;
  height: fit-content;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

.floating-medical-icon:hover {
  opacity: 1;
}

.floating-medical-icon .v-icon {
  color: rgba(
    255,
    255,
    255,
    0.15
  ) !important; /* Light white for icons on primary background */
}

/* Specific icon positioning - now static */
.icon-1 {
  top: 15%;
  left: 5%;
}
.icon-2 {
  top: 20%;
  right: 10%;
}
.icon-3 {
  bottom: 10%;
  left: 15%;
}
.icon-4 {
  top: 60%;
  left: 10%;
}
.icon-5 {
  bottom: 20%;
  right: 5%;
}
.icon-6 {
  top: 35%;
  left: 20%;
}

/* Main Card - White */
.main-card {
  z-index: 3;
  /* max-width is now set in template to 450px */
  margin: 2rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Adding a subtle shadow back */
}

.white-card {
  background: $neutral-300 !important; /* Neutral-300: #F5F7FA */
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* box-shadow is now managed by .main-card */
}

/* Right Login Section (Neutral-300) */
.login-section-box {
  background: $neutral-300; /* Neutral-300: #F5F7FA */
  min-height: 500px; /* Reduced min-height since there is no side-by-side comparison */
}

.login-content {
  max-width: 400px;
  margin: 0 auto;
}

/* White Dialog Styles */
.white-dialog {
  background: $neutral-100 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Card Header - Using Neutral Color with Larger Font */
.welcome-title-dark {
  color: $neutral-900; /* Neutral-900: #212121 */
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.login-instruction-dark {
  color: $neutral-700; /* Neutral-700: #717171 */
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

/* App Title - Using Primary Color */
.app-title-dark {
  color: $primary-500; /* Primary-500: #567EE7 */
  text-shadow: none;
}

.hospital-logo {
  height: 180px;
  width: auto;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.sso-text-dark {
  color: $neutral-800; /* Dark grey for SSO text */
  font-size: 0.95rem;
  font-weight: 500;
}

/* Buttons (Primary theme) */
.login-btn {
  background: $primary-500 !important; /* Primary-500: #567EE7 */
  color: $neutral-100 !important; /* White text on primary button */
  border: none;
  box-shadow:
    0 8px 25px rgba(86, 126, 231, 0.3),
    /* Primary shadow */ 0 4px 12px rgba(86, 126, 231, 0.2);
  transition: all 0.3s ease;
  text-transform: none;
  font-size: 1rem;
  height: 56px;
}

.login-btn:hover {
  transform: translateY(-2px);
  background: $primary-600 !important; /* Primary-600: #3A61C9 on hover */
  box-shadow:
    0 12px 30px rgba(86, 126, 231, 0.4),
    0 6px 15px rgba(86, 126, 231, 0.3);
}

.register-btn-dark {
  color: $primary-500 !important; /* Primary-500: #567EE7 */
  border: 2px solid $primary-500 !important; /* Primary border */
  background: transparent !important;
  transition: all 0.3s ease;
  text-transform: none;
  height: 48px;
}

.register-btn-dark:hover {
  background: rgba(
    86,
    126,
    231,
    0.05
  ) !important; /* Light primary hover background */
  border-color: $primary-600 !important; /* Primary-600 border on hover */
  transform: translateY(-1px);
}

/* Custom Divider - Dark for white background */
.custom-divider-dark {
  border-color: $neutral-400 !important; /* Light grey divider */
  opacity: 1 !important;
}

/* Help Text and Links - Dark for white background */
.help-text-dark {
  color: $neutral-800; /* Dark grey help text */
  font-size: 0.9rem;
}

.contact-link-dark {
  color: $primary-500 !important; /* Primary-500: #567EE7 */
  text-decoration: underline;
  text-transform: none;
  font-size: 0.9rem;
}

.help-link-dark {
  color: $neutral-700; /* Grey link */
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.help-link-dark:hover {
  color: $primary-500; /* Primary-500 on hover */
}

/* Transparent Background */
.transparent {
  background: transparent !important;
}

/* Dialog Accents */
.v-card-title .v-icon,
.v-list-item .v-icon {
  color: $primary-500 !important; /* Primary accents */
}

.v-btn[color="#FF9B1B"] {
  background-color: $primary-500 !important;
  color: $neutral-100 !important;
}

.v-alert[color="orange"] {
  border-left: 8px solid $primary-500 !important;
  color: $neutral-900 !important;
}

/* Responsive Design Adjustments for single column */
@media (max-width: 960px) {
  .main-card {
    margin: 1rem;
    max-width: 450px !important; /* Enforce max-width on smaller screens */
  }

  .login-section-box {
    min-height: auto;
    padding: 2rem !important;
  }
}

@media (max-width: 600px) {
  .main-card {
    margin: 0.5rem;
  }

  .login-section-box {
    padding: 1.5rem !important;
  }
}
