/*!
 * CPWL Authentication Pages Styling for Outager Application
 * Login, MFA, and authentication-specific styling
 * Based on CPWL Look, Tone and Feel Guidelines V4
 */

/* ===== AUTHENTICATION PAGE BACKGROUND ===== */

/* Replace the default gradient with CPWL gradient */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--cpwl-dark-blue) 0%, var(--cpwl-mid-blue) 100%) !important;
  background-attachment: fixed;
}

/* ===== AUTHENTICATION CARD STYLING ===== */

/* Main authentication card */
.auth-card {
  border: 1px solid var(--cpwl-charcoal-grey-light) !important;
  box-shadow: 0 1rem 3rem rgba(0, 35, 75, 0.175) !important;
  border-radius: 1rem !important;
  overflow: hidden;
}

.auth-card .card-body {
  background: #fff;
}

/* ===== LOGIN PAGE STYLING ===== */

/* Login page header */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-header h1 {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.auth-header .auth-subtitle {
  color: var(--cpwl-charcoal-grey);
  font-family: var(--cpwl-font-family);
  font-size: 1rem;
  font-weight: 400;
}

/* CPWL Logo/Branding Area */
.auth-branding {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--cpwl-dark-blue) 0%, var(--cpwl-mid-blue) 100%);
  color: #fff;
  border-radius: 0.5rem;
}

.auth-branding h2 {
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.auth-branding p {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--cpwl-font-family);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* ===== AUTHENTICATION FORMS ===== */

/* Form styling for auth pages */
.auth-form {
  padding: 0;
}

.auth-form .form-group {
  margin-bottom: 1.5rem;
}

.auth-form .form-control {
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem;
  font-family: var(--cpwl-font-family);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.auth-form .form-control:focus {
  border-color: var(--cpwl-mid-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.25) !important;
  transform: translateY(-1px);
}

.auth-form .form-label,
.auth-form label {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.auth-form .form-text {
  color: var(--cpwl-charcoal-grey) !important;
  font-family: var(--cpwl-font-family);
  font-size: 0.85rem;
}

/* ===== AUTHENTICATION BUTTONS ===== */

/* Primary auth button (Login, Complete Setup, etc.) */
.auth-btn-primary {
  background: linear-gradient(135deg, var(--cpwl-mid-blue) 0%, var(--cpwl-dark-blue) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.025rem;
}

.auth-btn-primary:hover {
  background: linear-gradient(135deg, var(--cpwl-dark-blue) 0%, var(--cpwl-mid-blue) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 35, 75, 0.3) !important;
  color: #fff !important;
}

.auth-btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.5) !important;
  color: #fff !important;
}

.auth-btn-primary:active {
  transform: translateY(0);
  color: #fff !important;
}

/* Secondary auth buttons */
.auth-btn-secondary {
  background: transparent !important;
  border: 2px solid var(--cpwl-charcoal-grey) !important;
  color: var(--cpwl-charcoal-grey) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.auth-btn-secondary:hover {
  background: var(--cpwl-charcoal-grey) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ===== MFA SETUP PAGE STYLING ===== */

/* MFA setup header */
.mfa-header {
  text-align: center;
  margin-bottom: 2rem;
}

.mfa-header h1 {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 700;
  font-size: 1.75rem;
}

.mfa-header .fa-shield-alt {
  color: var(--cpwl-mid-blue) !important;
}

.mfa-header p {
  color: var(--cpwl-charcoal-grey);
  font-family: var(--cpwl-font-family);
  font-size: 1rem;
  line-height: 1.5;
}

/* MFA step cards */
.mfa-step-card {
  border: 1px solid var(--cpwl-charcoal-grey-light) !important;
  border-radius: 0.75rem !important;
  transition: all 0.3s ease;
  height: 100%;
}

.mfa-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 35, 75, 0.15) !important;
}

.mfa-step-card .card-title {
  font-family: var(--cpwl-font-family);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.mfa-step-card .card-text {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
  line-height: 1.5;
}

/* MFA step icons */
.mfa-step-card .fa-mobile-alt {
  color: var(--cpwl-mid-blue) !important;
}

.mfa-step-card .fa-qrcode {
  color: var(--cpwl-mid-blue) !important;
}

.mfa-step-card .fa-check-circle {
  color: var(--cpwl-spring-green) !important;
}

.mfa-step-card .fa-exclamation-triangle {
  color: var(--cpwl-sunflower-yellow) !important;
}

/* QR Code container */
.qr-code-container {
  background: #fff !important;
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  display: inline-block;
}

.qr-code-container svg {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== ALERT STYLING FOR AUTH PAGES ===== */

/* Error alerts */
.auth-alert-danger {
  background-color: rgba(238, 36, 59, 0.1) !important;
  border: 1px solid var(--cpwl-candy-apple) !important;
  color: var(--cpwl-candy-apple) !important;
  border-radius: 0.5rem;
  font-family: var(--cpwl-font-family);
  font-weight: 500;
}

/* Success alerts */
.auth-alert-success {
  background-color: rgba(58, 163, 73, 0.1) !important;
  border: 1px solid var(--cpwl-spring-green) !important;
  color: var(--cpwl-spring-green) !important;
  border-radius: 0.5rem;
  font-family: var(--cpwl-font-family);
  font-weight: 500;
}

/* Info alerts */
.auth-alert-info {
  background-color: rgba(0, 164, 224, 0.1) !important;
  border: 1px solid var(--cpwl-mid-blue) !important;
  color: var(--cpwl-mid-blue) !important;
  border-radius: 0.5rem;
  font-family: var(--cpwl-font-family);
  font-weight: 500;
}

/* Warning alerts */
.auth-alert-warning {
  background-color: rgba(254, 192, 15, 0.1) !important;
  border: 1px solid var(--cpwl-sunflower-yellow) !important;
  color: var(--cpwl-dark-blue) !important;
  border-radius: 0.5rem;
  font-family: var(--cpwl-font-family);
  font-weight: 500;
}

/* ===== AUTHENTICATION LINKS ===== */

.auth-link {
  color: var(--cpwl-mid-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.auth-link:hover {
  color: var(--cpwl-dark-blue) !important;
  text-decoration: underline;
}

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

.auth-form .is-invalid {
  border-color: var(--cpwl-candy-apple) !important;
  box-shadow: 0 0 0 0.2rem rgba(238, 36, 59, 0.25) !important;
}

.auth-form .is-valid {
  border-color: var(--cpwl-spring-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(58, 163, 73, 0.25) !important;
}

.auth-form .invalid-feedback {
  color: var(--cpwl-candy-apple) !important;
  font-family: var(--cpwl-font-family);
  font-size: 0.85rem;
  font-weight: 500;
}

.auth-form .valid-feedback {
  color: var(--cpwl-spring-green) !important;
  font-family: var(--cpwl-font-family);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .auth-header h1 {
    font-size: 1.5rem;
  }
  
  .auth-branding h2 {
    font-size: 1.5rem;
  }
  
  .mfa-step-card {
    margin-bottom: 1.5rem;
  }
  
  .qr-code-container svg {
    max-width: 150px;
  }
}

@media (max-width: 576px) {
  .auth-header h1 {
    font-size: 1.25rem;
  }
  
  .auth-branding {
    padding: 1rem;
  }
  
  .auth-branding h2 {
    font-size: 1.25rem;
  }
  
  .auth-form .form-control {
    font-size: 0.9rem;
  }
  
  .auth-btn-primary,
  .auth-btn-secondary {
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

.auth-form .form-control:focus {
  outline: none;
}

.auth-btn-primary:focus,
.auth-btn-secondary:focus {
  outline: 2px solid var(--cpwl-mid-blue);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .auth-card {
    border: 3px solid var(--cpwl-mid-blue) !important;
  }
  
  .auth-form .form-control {
    border: 3px solid var(--cpwl-charcoal-grey) !important;
  }
  
  .mfa-step-card {
    border: 2px solid var(--cpwl-mid-blue) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .auth-form .form-control,
  .auth-btn-primary,
  .auth-btn-secondary,
  .mfa-step-card {
    transition: none;
  }
  
  .auth-form .form-control:focus {
    transform: none;
  }
  
  .auth-btn-primary:hover,
  .mfa-step-card:hover {
    transform: none;
  }
}

/* ===== CPWL BRAND ELEMENTS ===== */

/* CPWL brand accent for special text */
.cpwl-brand-text {
  background: linear-gradient(45deg, var(--cpwl-dark-blue), var(--cpwl-mid-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-family: var(--cpwl-font-family);
}

/* CPWL divider for auth pages */
.auth-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cpwl-mid-blue) 50%, transparent 100%);
  border: none;
  margin: 2rem 0;
}

/* Loading spinner with CPWL colors */
.auth-spinner {
  border: 3px solid rgba(0, 164, 224, 0.3);
  border-top: 3px solid var(--cpwl-mid-blue);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== MODERN OTP WIDGET STYLING ===== */

/* OTP widget container */
.otp-widget-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 1rem;
}

/* Individual OTP input boxes */
.otp-input {
  width: 50px;
  height: 60px;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  border-radius: 0.5rem !important;
  background: #fff;
  color: var(--cpwl-dark-blue);
  font-family: var(--cpwl-font-family);
  transition: all 0.3s ease;
  caret-color: var(--cpwl-mid-blue);
}

/* OTP input focus state */
.otp-input:focus {
  outline: none;
  border-color: var(--cpwl-mid-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 164, 224, 0.25) !important;
  transform: scale(1.05);
}

/* OTP input hover state */
.otp-input:hover:not(:disabled) {
  border-color: var(--cpwl-mid-blue) !important;
}

/* OTP input filled state */
.otp-input.filled {
  border-color: var(--cpwl-spring-green) !important;
  background: rgba(58, 163, 73, 0.05);
}

/* OTP input error state */
.otp-input.error {
  border-color: var(--cpwl-candy-apple) !important;
  animation: shake 0.5s;
  background: rgba(238, 36, 59, 0.05);
}

/* OTP input disabled state */
.otp-input:disabled {
  background: var(--cpwl-charcoal-grey-light);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* OTP completion checkmark */
.otp-complete-indicator {
  display: none;
  color: var(--cpwl-spring-green);
  font-size: 1.5rem;
  margin-left: 0.5rem;
  animation: fadeIn 0.3s ease;
}

.otp-complete-indicator.show {
  display: inline-block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* OTP widget help text */
.otp-help-text {
  text-align: center;
  color: var(--cpwl-charcoal-grey);
  font-family: var(--cpwl-font-family);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Hidden submit button (auto-submit on completion) */
.otp-hidden-submit {
  display: none;
}

/* Loading state for OTP widget */
.otp-widget-container.loading .otp-input {
  pointer-events: none;
  opacity: 0.6;
}

/* Mobile responsive OTP widget */
@media (max-width: 576px) {
  .otp-widget-container {
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .otp-input {
    width: 42px;
    height: 52px;
    font-size: 1.5rem;
  }
}

/* Tablet responsive OTP widget */
@media (min-width: 577px) and (max-width: 768px) {
  .otp-widget-container {
    gap: 0.65rem;
  }

  .otp-input {
    width: 46px;
    height: 56px;
    font-size: 1.6rem;
  }
}

/* Large screen OTP widget */
@media (min-width: 1200px) {
  .otp-input {
    width: 55px;
    height: 65px;
    font-size: 2rem;
  }

  .otp-widget-container {
    gap: 1rem;
  }
}

/* High contrast mode support for OTP */
@media (prefers-contrast: high) {
  .otp-input {
    border: 3px solid var(--cpwl-charcoal-grey) !important;
  }

  .otp-input:focus {
    border: 3px solid var(--cpwl-mid-blue) !important;
  }

  .otp-input.filled {
    border: 3px solid var(--cpwl-spring-green) !important;
  }

  .otp-input.error {
    border: 3px solid var(--cpwl-candy-apple) !important;
  }
}

/* Reduced motion support for OTP */
@media (prefers-reduced-motion: reduce) {
  .otp-input {
    transition: none;
  }

  .otp-input:focus {
    transform: none;
  }

  .otp-input.error {
    animation: none;
  }

  .otp-complete-indicator.show {
    animation: none;
  }
}

/* Dark mode support (if implemented in future) */
@media (prefers-color-scheme: dark) {
  .otp-input {
    background: #2d3748;
    color: #fff;
    border-color: #4a5568 !important;
  }

  .otp-input:focus {
    border-color: var(--cpwl-mid-blue) !important;
  }
}

/* Accessibility: Focus visible for keyboard navigation */
.otp-input:focus-visible {
  outline: 2px solid var(--cpwl-mid-blue);
  outline-offset: 2px;
}

/* OTP widget separator (visual divider between groups of 3) */
.otp-separator {
  width: 12px;
  height: 2px;
  background: var(--cpwl-charcoal-grey-light);
  margin: 0 0.25rem;
  align-self: center;
}

/* OTP widget with separator styling */
.otp-widget-with-separator {
  display: flex;
  justify-content: center;
  align-items: center;
}

.otp-group {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 576px) {
  .otp-group {
    gap: 0.5rem;
  }

  .otp-separator {
    width: 8px;
    margin: 0 0.15rem;
  }
}