/* Light Energy Platform Login Styles - Matching Project Design */

/* Light grid pattern background */
.bg-grid-light {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.1)'%3e%3cpath d='m0 .5h32m-32 32v-32'/%3e%3c/svg%3e");
}

/* Custom focus styles for light theme */
.focus\:ring-\[#0095B4\]:focus {
    --tw-ring-color: #0095B4;
}

/* Custom shadow for light theme */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Enhanced hover shadow for light theme */
.hover\:shadow-xl:hover {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Custom gradient for light theme */

.from-\[#005A70\] {
    --tw-gradient-from: #005A70;
    --tw-gradient-to: rgb(0 90 112 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[#0095B4\] {
    --tw-gradient-to: #0095B4;
}

.hover\:from-\[#004A60\]:hover {
    --tw-gradient-from: #004A60;
}

.hover\:to-\[#0085A4\]:hover {
    --tw-gradient-to: #0085A4;
}

/* Custom checkbox styling for light theme */
input[type="checkbox"]:checked {
    background-color: #0095B4;
    border-color: #0095B4;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Enhanced button hover effects for light theme */
.group:hover .group-hover\:text-blue-100 {
    color: rgb(219 234 254);
}

/* Custom input focus states for light theme */
.focus\:ring-\[#0095B4\]:focus {
    --tw-ring-color: #0095B4;
}

/* Responsive adjustments for light theme */
@media (max-width: 640px) {
    .max-w-md {
        max-width: 100%;
        margin: 0 1rem;
    }
    
    .py-8 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* High contrast mode support for light theme */
@media (prefers-contrast: high) {
    .border-gray-300 {
        border-width: 2px;
    }
    
    .focus\:ring-2:focus {
        --tw-ring-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .transform {
        transform: none !important;
    }
    
    .hover\:-translate-y-0\.5:hover {
        transform: none !important;
    }
}

/* Additional light theme enhancements */
.bg-gray-50 {
    background-color: #f9fafb;
}

.bg-white {
    background-color: #ffffff;
}

.border-gray-200 {
    border-color: #e5e7eb;
}

.border-gray-300 {
    border-color: #d1d5db;
}

.text-gray-900 {
    color: #111827;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-400 {
    color: #9ca3af;
}

/* Custom scrollbar for light theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}