/* Login Page Dark Theme Styles */
/* Matches the main dashboard dark theme pattern */

/* Dark Mode - Login Page Background */
body.dark-mode #kt_body,
body.dark-mode .d-flex.flex-column.flex-root,
body.dark-mode .d-flex.flex-column.flex-column-fluid {
  background-color: #000000 !important;
}

/* Login Container Card */
body.dark-mode .w-lg-500px.bg-body {
  background-color: #000000 !important;
  border: 1px solid #1a1a1a !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12) !important;
}

/* Login Title */
body.dark-mode .text-dark {
  color: #C2C3CD !important;
}

/* Links */
body.dark-mode .link-primary {
  color: #C2C3CD !important;
  opacity: 0.8;
}

body.dark-mode .link-primary:hover {
  color: #ffffff !important;
  opacity: 1;
}

/* Form Labels */
body.dark-mode .form-label,
body.dark-mode label {
  color: #C2C3CD !important;
}

/* Checkbox Labels */
body.dark-mode .form-check-label {
  color: #C2C3CD !important;
}

/* Buttons - Primary */
body.dark-mode .btn-primary {
  background-color: #111111 !important;
  border-color: #1f1f1f !important;
  color: #C2C3CD !important;
}

body.dark-mode .btn-primary:hover {
  background-color: #151515 !important;
  border-color: #232323 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-primary:focus {
  background-color: #151515 !important;
  border-color: #232323 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important;
}

/* Buttons - Secondary */
body.dark-mode .btn-secondary {
  background-color: #111111 !important;
  border-color: #1f1f1f !important;
  color: #C2C3CD !important;
}

body.dark-mode .btn-secondary:hover {
  background-color: #151515 !important;
  border-color: #232323 !important;
  color: #ffffff !important;
}

/* Input Fields - Already handled by input.css but ensure consistency */
body.dark-mode input.form-control,
body.dark-mode input.form-control-solid {
  background-color: #111111 !important;
  border-color: #1f1f1f !important;
  color: #C2C3CD !important;
}

body.dark-mode input.form-control:focus,
body.dark-mode input.form-control-solid:focus {
  background-color: #111111 !important;
  border-color: #232323 !important;
  color: #C2C3CD !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode input.form-control::placeholder,
body.dark-mode input.form-control-solid::placeholder {
  color: #8a8d9a !important;
}

/* Checkbox */
body.dark-mode .form-check-input {
  background-color: #111111 !important;
  border-color: #1f1f1f !important;
}

body.dark-mode .form-check-input:checked {
  background-color: #111111 !important;
  border-color: #1f1f1f !important;
}

body.dark-mode .form-check-input:focus {
  border-color: #232323 !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1) !important;
}

/* OTP Input Container */
body.dark-mode .react-otp-input {
  gap: 1rem;
}

/* Error Messages */
body.dark-mode .text-danger,
body.dark-mode .alert-danger {
  color: #f64e60 !important;
  background-color: rgba(246, 78, 96, 0.1) !important;
  border-color: rgba(246, 78, 96, 0.3) !important;
}

/* Light Mode - Login Page Background */
body.light-mode #kt_body,
body.light-mode .d-flex.flex-column.flex-root,
body.light-mode .d-flex.flex-column.flex-column-fluid {
  background-color: #ffffff !important;
}

/* Login Container Card - Light Mode */
body.light-mode .w-lg-500px.bg-body {
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Light Mode - Text */
body.light-mode .text-dark {
  color: #212529 !important;
}

body.light-mode .form-label,
body.light-mode label,
body.light-mode .form-check-label {
  color: #212529 !important;
}

body.light-mode .link-primary {
  color: #1C6AA5 !important;
}

body.light-mode .link-primary:hover {
  color: #0F4F80 !important;
}