/* Modern Auth Styles for schoolXchange */
/* This file provides enhanced authentication styling while preserving all existing functionality */

/* CSS Custom Properties for auth theming */
:root {
  --auth-bg-primary: #ffffff;
  --auth-bg-secondary: #f8fafc;
  --auth-card-bg: #ffffff;
  --auth-border: #e2e8f0;
  --auth-border-focus: #00838f;
  --auth-text-primary: #1e293b;
  --auth-text-secondary: #64748b;
  --auth-text-muted: #94a3b8;
  --auth-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --auth-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --auth-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --auth-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --auth-radius-sm: 6px;
  --auth-radius-md: 8px;
  --auth-radius-lg: 12px;
  --auth-radius-xl: 16px;
  --auth-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --auth-gradient: linear-gradient(135deg, #00838f 0%, #00695c 100%);
  --auth-gradient-subtle: linear-gradient(135deg, #00acc1 0%, #00838f 100%);
}

/* Dark theme variables */
.sc-theme-dark {
  --auth-bg-primary: #0f172a;
  --auth-bg-secondary: #1e293b;
  --auth-card-bg: #1e293b;
  --auth-border: #334155;
  --auth-border-focus: #26a69a;
  --auth-text-primary: #f1f5f9;
  --auth-text-secondary: #cbd5e1;
  --auth-text-muted: #64748b;
  --auth-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --auth-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --auth-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --auth-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --auth-gradient: linear-gradient(135deg, #00838f 0%, #004d40 100%);
  --auth-gradient-subtle: linear-gradient(135deg, #26a69a 0%, #00838f 100%);
}

/* Enhanced login page wrapper */
.sc-login-page {
  background: var(--auth-bg-secondary) !important;
  background-image: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%), url('assets/img/lgnbg.jpg') !important;
  background-blend-mode: overlay !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

.sc-login-page-wrapper {
  min-height: 100vh !important;
  padding: 2rem 1rem !important;
  backdrop-filter: blur(10px) !important;
}

/* Modern card styling */
.sc-login-page .uk-card {
  background: var(--auth-card-bg) !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-radius-xl) !important;
  box-shadow: var(--auth-shadow-xl) !important;
  transition: var(--auth-transition) !important;
  backdrop-filter: blur(20px) !important;
  position: relative !important;
  overflow: hidden !important;
}

.sc-login-page .uk-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--auth-gradient);
  border-radius: var(--auth-radius-xl) var(--auth-radius-xl) 0 0;
}

.sc-login-page .uk-card-body {
  padding: 2.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Logo styling */
.sc-login-page-logo {
  text-align: center !important;
  margin-bottom: 2rem !important;
  position: relative !important;
}

.sc-login-page-logo img {
  max-height: 80px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) !important;
  transition: var(--auth-transition) !important;
}

.sc-login-page-logo img:hover {
  transform: scale(1.05) !important;
}

/* Enhanced form styling */
.sc-login-page-inner {
  position: relative !important;
}

/* Form labels */
.sc-login-page label,
.sc-login-page .uk-form-label,
.sc-login-page-inner label,
.sc-form-label {
  font-weight: 500 !important;
  color: var(--auth-text-secondary) !important;
  font-size: 0.8rem !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-left: 0 !important;
  opacity: 0.85 !important;
  visibility: visible !important;
}

/* Input wrapper styling */
.sc-input-wrapper {
  position: relative !important;
  width: 100% !important;
}

/* Form field containers */
.sc-login-page .uk-margin-medium {
  margin-bottom: 1.75rem !important;
}

.sc-login-page .uk-margin-medium:last-child {
  margin-bottom: 0 !important;
}

/* Enhanced input styling */
.sc-login-page .uk-input {
  background: var(--auth-bg-primary) !important;
  border: 2px solid var(--auth-border) !important;
  border-radius: var(--auth-radius-md) !important;
  padding: 1rem 1.25rem !important;
  font-size: 1rem !important;
  color: var(--auth-text-primary) !important;
  transition: var(--auth-transition) !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  line-height: 1.5 !important;
}

/* Placeholder styling */
.sc-login-page .uk-input::placeholder {
  color: var(--auth-text-muted) !important;
  opacity: 0.7 !important;
  font-style: normal !important;
}

.sc-login-page .uk-input:focus::placeholder {
  opacity: 0.5 !important;
}

.sc-login-page .uk-input:focus {
  outline: none !important;
  border-color: var(--auth-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(0, 131, 143, 0.1) !important;
  transform: translateY(-1px) !important;
}

.sc-login-page .uk-input:hover:not(:focus) {
  border-color: var(--auth-text-secondary) !important;
}

/* Enhanced button styling */
.sc-login-page .sc-button {
  background: var(--auth-gradient) !important;
  border: none !important;
  border-radius: var(--auth-radius-md) !important;
  padding: 1rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: white !important;
  transition: var(--auth-transition) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--auth-shadow-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.sc-login-page .sc-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.sc-login-page .sc-button:hover::before {
  left: 100%;
}

.sc-login-page .sc-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--auth-shadow-lg) !important;
}

.sc-login-page .sc-button:active {
  transform: translateY(0) !important;
}

/* Method chooser styling */
.schoolxchange-id-chooser {
  margin-bottom: 2rem !important;
  border-radius: var(--auth-radius-lg) !important;
  background: var(--auth-bg-secondary) !important;
  border: 1px solid var(--auth-border) !important;
  overflow: hidden !important;
}

.schoolxchange-id-chooser-account {
  padding: 1rem !important;
  display: flex !important;
  align-items: center !important;
  transition: var(--auth-transition) !important;
  border-bottom: 1px solid var(--auth-border) !important;
  position: relative !important;
}

.schoolxchange-id-chooser-account:last-child {
  border-bottom: none !important;
}

.schoolxchange-id-chooser-account:hover {
  background: rgba(0, 131, 143, 0.05) !important;
  transform: translateX(4px) !important;
}

.schoolxchange-id-chooser-account img {
  height: 40px !important;
  width: 40px !important;
  margin-right: 1rem !important;
  border-radius: var(--auth-radius-sm) !important;
  box-shadow: var(--auth-shadow-sm) !important;
}

.schoolxchange-id-chooser-account span {
  color: var(--auth-text-primary) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

/* Microsoft account specific styling */
.ms-account img {
  height: 32px !important;
  width: 32px !important;
  margin-right: 1rem !important;
}

/* Enhanced alert styling */
.sc-login-page [data-uk-alert] {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--auth-radius-md) !important;
  color: #dc2626 !important;
  padding: 0.875rem 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 0.875rem !important;
  position: relative !important;
  animation: slideInDown 0.3s ease-out !important;
}

.sc-theme-dark .sc-login-page [data-uk-alert] {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #fca5a5 !important;
}

/* Link styling */
.sc-login-page a {
  color: var(--auth-border-focus) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--auth-transition) !important;
}

.sc-login-page a:hover {
  color: #00695c !important;
  text-decoration: underline !important;
}

/* Checkbox styling */
.sc-login-page .checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

.sc-login-page .checkbox input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid var(--auth-border) !important;
  border-radius: var(--auth-radius-sm) !important;
  background: var(--auth-bg-primary) !important;
  cursor: pointer !important;
  position: relative !important;
  appearance: none !important;
  transition: var(--auth-transition) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.sc-login-page .checkbox input[type="checkbox"]:checked {
  background: var(--auth-border-focus) !important;
  border-color: var(--auth-border-focus) !important;
}

.sc-login-page .checkbox input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
}

.sc-login-page .checkbox label {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  color: var(--auth-text-primary) !important;
  letter-spacing: normal !important;
}

/* Animation keyframes */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form animations */
.sc-login-page .uk-card:not(.no-animation) {
  animation: fadeInUp 0.6s ease-out !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sc-login-page-wrapper {
    padding: 1rem !important;
  }
  
  .sc-login-page .uk-card-body {
    padding: 1.5rem !important;
  }
  
  .schoolxchange-id-chooser-account {
    padding: 0.875rem !important;
  }
  
  .schoolxchange-id-chooser-account img {
    height: 32px !important;
    width: 32px !important;
  }
}

/* Focus management for accessibility */
.sc-login-page *:focus {
  outline: 2px solid var(--auth-border-focus) !important;
  outline-offset: 2px !important;
}

.sc-login-page .uk-input:focus,
.sc-login-page .sc-button:focus {
  outline: none !important;
}

/* Loading states */
.sc-login-page .sc-button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.sc-login-page .sc-button.loading {
  position: relative !important;
  color: transparent !important;
}

.sc-login-page .sc-button.loading::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  margin: -10px 0 0 -10px !important;
  border: 2px solid transparent !important;
  border-top: 2px solid white !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
}

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

/* Enhanced footer styling */
.sc-login-page footer {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 1rem 0 !important;
  margin-top: 2rem !important;
}

/* Dark theme specific overrides */
.sc-theme-dark .sc-login-page {
  background-image: linear-gradient(135deg, rgba(67, 56, 202, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%), url('assets/img/lgnbg.jpg') !important;
}

.sc-theme-dark .schoolxchange-id-chooser {
  background: var(--auth-bg-secondary) !important;
  border-color: var(--auth-border) !important;
}

.sc-theme-dark .schoolxchange-id-chooser-account:hover {
  background: rgba(38, 166, 154, 0.1) !important;
}