Web-Antrean/assets/styles/loginpage/login.css

/* assets/styles/loginpage/login.css */

/* --- COLOR DEFINITIONS --- */
/* Base Orange: #FF9B1B (New) */
/* Hover/Darker Orange: #E68A00 (Calculated darker shade for hover effect) */
/* --- END COLOR DEFINITIONS --- */


/* Main Background - Now Orange */
.login-background {
  background: #FF9B1B; /* Solid Orange Background: #FF9B1B */
  min-height: 100vh;
  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 Orange 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 orange 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: white !important; /* Main card background is white */
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* box-shadow is now managed by .main-card */
}

/* Right Login Section (White) */
.login-section-box {
  background: white; /* Changed to white */
  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: white !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Card Header - Dark Text for white background */
.welcome-title-dark {
  color: #333; /* Dark text on white background */
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.login-instruction-dark {
  color: #777; /* Grey text for instruction on white background */
  font-size: 0.8rem;
  letter-spacing: 0.3px;
}

/* App Title - Dark for white background */
.app-title-dark {
  color: #FF9B1B; /* Orange app title: #FF9B1B */
  text-shadow: none;
}

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

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

/* Buttons (Orange theme) */
.login-btn {
  background: #FF9B1B !important; /* Solid Orange button: #FF9B1B */
  color: white !important; /* White text on orange button */
  border: none;
  box-shadow:
    0 8px 25px rgba(255, 155, 27, 0.3), /* Orange shadow: #FF9B1B */
    0 4px 12px rgba(255, 155, 27, 0.2);
  transition: all 0.3s ease;
  text-transform: none;
  font-size: 1rem;
  height: 56px;
}

.login-btn:hover {
  transform: translateY(-2px);
  background: #E68A00 !important; /* Slightly darker orange on hover */
  box-shadow:
    0 12px 30px rgba(255, 155, 27, 0.4),
    0 6px 15px rgba(255, 155, 27, 0.3);
}

.register-btn-dark {
  color: #FF9B1B !important; /* Orange text for register button: #FF9B1B */
  border: 2px solid #FF9B1B !important; /* Orange border: #FF9B1B */
  background: transparent !important;
  transition: all 0.3s ease;
  text-transform: none;
  height: 48px;
}

.register-btn-dark:hover {
  background: rgba(255, 155, 27, 0.05) !important; /* Light orange hover background */
  border-color: #E68A00 !important; /* Darker orange border on hover */
  transform: translateY(-1px);
}

/* Custom Divider - Dark for white background */
.custom-divider-dark {
  border-color: rgba(0, 0, 0, 0.1) !important; /* Light grey divider */
  opacity: 1 !important;
}

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

.contact-link-dark {
  color: #FF9B1B !important; /* Orange link: #FF9B1B */
  text-decoration: underline;
  text-transform: none;
  font-size: 0.9rem;
}

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

.help-link-dark:hover {
  color: #FF9B1B; /* Orange on hover: #FF9B1B */
}

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

/* Dialog Accents */
.v-card-title .v-icon,
.v-list-item .v-icon {
    color: #FF9B1B !important; /* Orange accents: #FF9B1B */
}

.v-btn[color="#FF9B1B"] {
    background-color: #FF9B1B !important;
    color: white !important;
}

.v-alert[color="orange"] {
    border-left: 8px solid #FF9B1B !important;
    color: #333 !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;
  }
}