/* Login Page Styling - Dark Theme */

/* Enhanced Input Fields with Glassmorphism */
.form-input {
    width: 100%;
    padding: 0.875rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
    color: #e6eef8 !important;
    font-size: 0.9375rem !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
}

.form-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.form-input::placeholder {
    color: #6b7280 !important;
    opacity: 0.7 !important;
}

.form-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #e6eef8 !important;
    margin-bottom: 0.5rem !important;
}

.form-group {
    margin-bottom: 1.25rem !important;
}

/* Icons in input fields */
.form-input+.absolute svg {
    color: #9ca3af !important;
}

/* ============================================ */
/* Light Mode Overrides for Login/Auth Pages   */
/* ============================================ */

/* Light mode body background */
html[data-theme="light"] body {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Light mode form inputs */
html[data-theme="light"] .form-input {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}

html[data-theme="light"] .form-input:focus {
    background: #ffffff !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .form-input::placeholder {
    color: #9ca3af !important;
}

/* Light mode form labels - stronger selectors */
html[data-theme="light"] .form-label,
html[data-theme="light"] label.form-label,
html[data-theme="light"] .form-group .form-label,
html[data-theme="light"] .form-group label {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Light mode checkbox styling */
html[data-theme="light"] input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    accent-color: #6366f1 !important;
}

html[data-theme="light"] input[type="checkbox"]:checked {
    background-color: #6366f1 !important;
}

/* Checkbox label text in light mode */
html[data-theme="light"] input[type="checkbox"]+label,
html[data-theme="light"] label:has(input[type="checkbox"]),
html[data-theme="light"] .text-sm.text-gray-300 {
    color: #374151 !important;
}

/* Light mode glass card */
html[data-theme="light"] .glass {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Light mode text colors */
html[data-theme="light"] .text-gray-100 {
    color: #111827 !important;
}

html[data-theme="light"] .text-gray-400 {
    color: #4b5563 !important;
}

html[data-theme="light"] .text-gray-300 {
    color: #374151 !important;
}

/* Light mode links */
html[data-theme="light"] a.text-indigo-400,
html[data-theme="light"] a.text-purple-400 {
    color: #4f46e5 !important;
}

html[data-theme="light"] a.text-indigo-400:hover,
html[data-theme="light"] a.text-purple-400:hover {
    color: #4338ca !important;
}

/* Light mode autofill fix */
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    caret-color: #1f2937 !important;
}

/* Light mode icons */
html[data-theme="light"] .form-input+.absolute svg {
    color: #6b7280 !important;
}