/**
 * Baba Fua - Employee Login Modal Styles
 * Professional, corporate theme
 * Optimized for performance and UX
 */

/* ==================== BASE STYLES ==================== */

/* Employee Modal Base Styles */
#employee-login-modal {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    will-change: opacity;
}

#employee-modal-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ==================== RESPONSIVE LAYOUT ==================== */

/* Mobile: Full Screen */
@media (max-width: 640px) {
    #employee-login-modal {
        padding: 0 !important;
        align-items: stretch;
    }
    
    #employee-modal-container {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Prevent iOS zoom */
    #employee-login-modal input,
    #employee-login-modal select,
    #employee-login-modal textarea {
        font-size: 16px !important;
    }
    
    /* Ensure scrollable content area */
    #employee-modal-container > div {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
    #employee-modal-container {
        max-height: 90vh;
        height: auto;
    }
    
    #employee-modal-container > div {
        max-height: calc(90vh - 2rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    #employee-modal-container {
        max-height: 90vh;
        height: auto;
    }
    
    #employee-modal-container > div {
        max-height: calc(90vh - 2rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ==================== ANIMATIONS ==================== */

/* Smooth animations with GPU acceleration */
#employee-modal-container {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

/* Input focus states with smooth transitions */
#employee-login-modal input:focus {
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#employee-login-modal input:not(:focus) {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Professional button hover effects */
#employee-login-modal button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#employee-login-modal button:hover:not(:disabled) {
    transform: translateY(-1px) translateZ(0);
}

#employee-login-modal button:active:not(:disabled) {
    transform: translateY(0) translateZ(0);
}

/* ==================== FORM INPUTS ==================== */

/* Ensure form inputs are properly sized on mobile */
@media (max-width: 640px) {
    #employee-login-modal input[type="text"],
    #employee-login-modal input[type="email"],
    #employee-login-modal input[type="tel"],
    #employee-login-modal input[type="password"],
    #employee-login-modal input[type="file"] {
        padding: 0.75rem 1rem;
        font-size: 16px;
        min-height: 44px; /* Touch target size */
    }
    
    #employee-login-modal label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    #employee-login-modal button[type="submit"] {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        min-height: 44px;
    }
    
    /* Reduce spacing on mobile */
    #employee-login-modal .space-y-3 > * + *,
    #employee-login-modal .space-y-4 > * + *,
    #employee-login-modal .space-y-5 > * + * {
        margin-top: 0.75rem;
    }
}

/* Input validation states */
#employee-login-modal input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

#employee-login-modal input:valid:not(:placeholder-shown):not([type="file"]) {
    border-color: #10b981;
}

/* ==================== SCROLLBAR ==================== */

/* Custom scrollbar styling */
#employee-modal-container > div::-webkit-scrollbar {
    width: 6px;
}

#employee-modal-container > div::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 10px;
}

#employee-modal-container > div::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 10px;
    transition: background 0.2s;
}

#employee-modal-container > div::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Mobile scrollbar */
@media (max-width: 640px) {
    #employee-modal-container > div::-webkit-scrollbar {
        width: 4px;
    }
}

/* Firefox scrollbar */
#employee-modal-container > div {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #1e293b;
}

/* ==================== MESSAGES & FEEDBACK ==================== */

/* Message animations */
#employee-message,
#employee-signup-message {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

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

/* Error message styling */
#employee-login-modal [id$="-error"] {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Professional glow effect */
#employee-login-submit,
#employee-signup-submit {
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#employee-login-submit:hover:not(:disabled),
#employee-signup-submit:hover:not(:disabled) {
    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.4);
    transform: translateY(-1px) translateZ(0);
}

#employee-login-submit:active:not(:disabled),
#employee-signup-submit:active:not(:disabled) {
    transform: translateY(0) translateZ(0);
    box-shadow: 0 2px 8px 0 rgba(59, 130, 246, 0.3);
}

/* Loading state */
#employee-login-submit:disabled,
#employee-signup-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==================== TOGGLE BUTTONS ==================== */

/* Sticky toggle buttons */
#show-employee-login,
#show-employee-signup {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: background-color, color;
}

/* ==================== FILE UPLOAD ==================== */

/* File upload area */
#employee-login-modal label[for="employee-signup-photo"] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#employee-login-modal label[for="employee-signup-photo"]:hover {
    border-color: #3b82f6;
    background-color: rgba(51, 65, 85, 0.5);
}

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

/* Focus visible for keyboard navigation */
#employee-login-modal *:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip focus outline for mouse users */
#employee-login-modal *:focus:not(:focus-visible) {
    outline: none;
}

/* ==================== PERFORMANCE ==================== */

/* GPU acceleration for smooth animations */
#employee-modal-container,
#employee-login-modal input,
#employee-login-modal button {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    #employee-modal-container,
    #employee-message,
    #employee-signup-message,
    #employee-login-modal [id$="-error"],
    #employee-login-modal input,
    #employee-login-modal button {
        transition: none !important;
        animation: none !important;
    }
    
    #employee-login-modal button:hover:not(:disabled) {
        transform: none !important;
    }
}

/* ==================== PRINT STYLES ==================== */

@media print {
    #employee-login-modal {
        display: none !important;
    }
}

/* ==================== LOADING STATES ==================== */

/* Spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#employee-submit-loading svg,
#employee-signup-submit-loading svg {
    animation: spin 1s linear infinite;
}

/* ==================== SUCCESS INDICATORS ==================== */

/* Green ring for valid 4-digit code */
#employee-login-modal input.ring-green-500 {
    animation: pulse-ring 0.5s ease-out;
}

@keyframes pulse-ring {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}