/* ==========================================================================
   ELITE SPLIT VIEWPORT LOGIN ARCHITECTURE (login.css)
   ========================================================================== */

/* Left Column Contextual Assets */
.login-branding-side {
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-branding-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Rich, high-density dark protective tint ensures maximum typography contrast mapping */
    background: linear-gradient(135deg, rgba(20, 24, 33, 0.92) 0%, rgba(25, 135, 84, 0.45) 100%);
    z-index: 1;
}

/* Custom Typography Weights */
.fw-extrabold { font-weight: 800; } /* Set to 800 standard to support broad web font stacks safely */
.small-tracking { letter-spacing: 0.5px; }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1) !important; }

/* Right Column Dimension Constraints */
.login-card-container {
    max-width: 440px;
}

/* --- Premium Custom Input Layout Blocks --- */
.input-group-custom {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-span {
    position: absolute;
    left: 18px;
    z-index: 5;
    pointer-events: none;
    font-size: 1rem;
}

.login-input {
    background-color: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 0.9rem 1rem 0.9rem 3rem !important; /* Spacious left margin sets indentation past icon */
    font-size: 0.95rem;
    color: #212529 !important;
    border-radius: 0.75rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.login-input::placeholder {
    color: #adb5bd !important;
    font-size: 0.9rem;
}

/* Unified Success Halo Focus State Mapping */
.login-input:focus {
    background-color: #ffffff !important;
    border-color: #198754 !important; /* Signature Corporate Green Accent */
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12) !important;
    outline: none;
}

/* FIX 1: Anti-Autofill Reset Vector 
   Prevents modern browsers from breaking your colors on saved credential entry 
*/
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover, 
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #212529 !important;
    box-shadow: 0 0 0px 1000px #f8f9fa inset !important; /* Forces your light gray hue over system defaults */
    transition: background-color 5000s ease-in-out 0s;
}

/* FIX 2: Custom Interactive Checkboxes 
   Added !important attributes to successfully override default Bootstrap themes 
*/
.custom-checkbox .form-check-input:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}
.custom-checkbox .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.15) !important;
    border-color: #198754 !important;
}

/* Submission CTA Interactivity Parameters */
.login-submit-btn {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* FIX 3: Sets an initial default point for box-shadow transitions */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.25) !important;
}

.back-home-link {
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}
.back-home-link:hover {
    color: #198754 !important;
    transform: translateX(-4px);
}

/* ==========================================================================
   HARDWARE ACCELERATED ENTRY INTERACTION ANIMATIONS
   ========================================================================== */
.animate-fade-up {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: loginReveal 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.animate-fade-up-delayed {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: loginReveal 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s forwards;
}

@keyframes loginReveal {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}