/**
 * authentication.css
 * Shared styles for authentication pages (Login, Signup, ForgotPassword, ResetPassword, etc.)
 * Extracted from inline style blocks to eliminate duplication
 */

/* ============================================
   Branded Background - Base Structure
   ============================================ */

.branded-bg {
    position: relative;
    overflow: hidden;
}

/* Blue theme - Login, ForgotPassword, ResetPassword, VerifyEmail, ResendVerification */
.branded-bg-blue {
    background-image: linear-gradient(135deg, #3b82f6 0%, #1e40af 50%, #1d4ed8 100%);
}

/* Blue Dark Theme - Use blue gradient (default) */
.dark:not(.theme-dark-black) .branded-bg-blue,
.dark.theme-dark-blue .branded-bg-blue {
    background-image: linear-gradient(135deg, #1a2d52 0%, #1e3a66 50%, #2d4a7a 100%);
}

/* Midnight Black Theme - Pure neutral gradient (NO blue tint) */
.dark.theme-dark-black .branded-bg-blue {
    background-image: linear-gradient(135deg, #262626 0%, #1a1a1a 50%, #0a0a0a 100%);
}

/* Green theme - Signup */
.branded-bg-green {
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
}

/* Green gradient - vibrant in both themes */
.dark .branded-bg-green {
    background-image: linear-gradient(135deg, #166534 0%, #15803d 50%, #16a34a 100%);
}

/* Purple theme - MfaVerify */
.branded-bg-purple {
    background-image: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #7e22ce 100%);
}

/* Purple gradient - vibrant in both themes */
.dark .branded-bg-purple {
    background-image: linear-gradient(135deg, #581c87 0%, #6b21a8 50%, #7e22ce 100%);
}

/* ============================================
   Text Colors - Ensure Readability on Branded Backgrounds
   ============================================ */

/* Light mode - white text on colored background */
.branded-bg h3,
.branded-bg div,
.branded-bg span {
    color: white !important;
}

.branded-bg .text-secondary-foreground {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Dark mode - light text on dark background */
.dark .branded-bg h3,
.dark .branded-bg div,
.dark .branded-bg span {
    color: rgba(241, 245, 249, 1) !important; /* slate-100 */
}

.dark .branded-bg .text-secondary-foreground {
    color: rgba(203, 213, 225, 1) !important; /* slate-300 */
}

/* ============================================
   Feature Bullets (Login page)
   ============================================ */

.feature-bullet-workorders {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.feature-bullet-analytics {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.feature-bullet-admin {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ============================================
   Animations - Shared Across Auth Pages
   ============================================ */

/* Feature items staggered animation */
.feature-item {
    animation: fadeInUp 0.6s ease-out both;
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }

/* Form animations */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out both;
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Keyframes - iOS prefixes included */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

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

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   Loading Spinner (Shared)
   ============================================ */

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border 0.75s linear infinite;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
}

@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ============================================
   Input Focus Effect (Shared)
   ============================================ */

.kt-input:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: rgb(59, 130, 246);
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .feature-item,
    .fade-in-up,
    .fade-in,
    .spinner-border {
        animation: none !important;
        transition: none !important;
    }
}