/* ===== LOGIN PAGE DARK MODE VARIABLES AND STYLES ===== */
/* This file contains CSS variables and styles specific to the login page dark mode */

/* ===== CSS VARIABLES FOR LIGHT AND DARK MODE ===== */
:root {
    /* Light Mode Variables */
    --login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --login-container-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    --login-card-bg: rgba(255, 255, 255, 0.98);
    --login-card-border: rgba(255, 255, 255, 0.2);
    --login-card-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    --login-text-primary: #2d3748;
    --login-text-secondary: #718096;
    --login-text-muted: #a0aec0;
    --login-input-bg: #ffffff;
    --login-input-border: #e2e8f0;
    --login-input-text: #2d3748;
    --login-accent: #667eea;
    --login-accent-hover: #764ba2;
    --login-link-color: #667eea;
    --login-link-hover: #764ba2;
    --login-badge-bg: rgba(40, 167, 69, 0.08);
    --login-badge-border: rgba(40, 167, 69, 0.15);
    --login-badge-color: #28a745;
    --login-alert-bg: rgba(23, 162, 184, 0.08);
    --login-alert-border: #17a2b8;
    --login-alert-text: #17a2b8;
    --login-divider: #e2e8f0;
    --login-security-bg: rgba(40, 167, 69, 0.1);
    --login-security-border: rgba(40, 167, 69, 0.2);
    --login-security-text: #28a745;
}

/* Dark Mode Variables */
body.dark-mode {
    --login-bg: #0f172a;
    --login-container-bg: transparent;
    --login-card-bg: #1e293b;
    --login-card-border: #334155;
    --login-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --login-text-primary: #f1f5f9;
    --login-text-secondary: #cbd5e1;
    --login-text-muted: #94a3b8;
    --login-input-bg: #f8fafc;
    --login-input-border: #475569;
    --login-input-text: #0f172a;
    --login-accent: #3b82f6;
    --login-accent-hover: #2563eb;
    --login-link-color: #60a5fa;
    --login-link-hover: #93c5fd;
    --login-badge-bg: rgba(59, 130, 246, 0.1);
    --login-badge-border: rgba(59, 130, 246, 0.2);
    --login-badge-color: #93c5fd;
    --login-alert-bg: rgba(59, 130, 246, 0.15);
    --login-alert-border: rgba(59, 130, 246, 0.3);
    --login-alert-text: #93c5fd;
    --login-divider: #334155;
    --login-security-bg: rgba(16, 185, 129, 0.1);
    --login-security-border: rgba(16, 185, 129, 0.3);
    --login-security-text: #34d399;
}

/* ===== APPLY VARIABLES TO LOGIN ELEMENTS ===== */

/* Main background */
body.login-modern {
    background: var(--login-bg) !important;
}

/* Container */
.login-container {
    background: var(--login-container-bg) !important;
    box-shadow: none !important;
    padding: 16px !important;
}

/* Card */
.login-card {
    background: var(--login-card-bg) !important;
    border: 1px solid var(--login-card-border) !important;
    color: var(--login-text-primary) !important;
    border-radius: 24px !important;
    box-shadow: var(--login-card-shadow) !important;
}

/* Force all children to transparent background */
.login-card *:not(input):not(select):not(textarea):not(.btn):not(.alert):not(.security-badge) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Text colors */
.login-card h1,
.login-card h2,
.login-card h3,
.login-card h4,
.login-card .text-dark {
    color: var(--login-text-primary) !important;
}

.login-card .text-primary {
    color: var(--login-link-color) !important;
}

.login-card .text-muted,
.login-card p,
.login-card small {
    color: var(--login-text-muted) !important;
}

.login-card label,
.login-card .form-label {
    color: var(--login-text-secondary) !important;
}

/* Form inputs */
.login-card .form-floating input,
.login-card .form-control,
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    background: var(--login-input-bg) !important;
    border: 2px solid var(--login-input-border) !important;
    color: var(--login-input-text) !important;
}

.login-card input:focus {
    background: var(--login-input-bg) !important;
    border-color: var(--login-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

.login-card input::placeholder {
    color: var(--login-text-muted) !important;
}

/* Form floating labels */
.login-card .form-floating label {
    color: var(--login-text-muted) !important;
}

.login-card .form-floating input:focus + label,
.login-card .form-floating input:not(:placeholder-shown) + label {
    color: var(--login-accent) !important;
}

/* Security badges */
.login-card .security-badge {
    background: var(--login-badge-bg) !important;
    border: 1px solid var(--login-badge-border) !important;
    color: var(--login-badge-color) !important;
}

/* Alerts */
.login-card .alert,
.login-card .alert-info {
    background: var(--login-alert-bg) !important;
    border: 1px solid var(--login-alert-border) !important;
    color: var(--login-alert-text) !important;
}

.login-card .alert-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.login-card .alert-danger {
    background: rgba(248, 113, 113, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Checkbox */
.login-card .form-check-input {
    background-color: var(--login-input-bg) !important;
    border: 2px solid var(--login-input-border) !important;
}

.login-card .form-check-input:checked {
    background-color: var(--login-accent) !important;
    border-color: var(--login-accent) !important;
}

.login-card .form-check-label {
    color: var(--login-text-secondary) !important;
}

/* Links */
.login-card a,
.login-card .forgot-password {
    color: var(--login-link-color) !important;
}

.login-card a:hover,
.login-card .forgot-password:hover {
    color: var(--login-link-hover) !important;
}

/* Button */
.login-card .btn-login {
    background: linear-gradient(135deg, var(--login-accent) 0%, var(--login-accent-hover) 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.login-card .btn-login:hover {
    background: linear-gradient(135deg, var(--login-accent-hover) 0%, var(--login-accent) 100%) !important;
}

/* Security indicator */
.security-indicator {
    background: var(--login-security-bg) !important;
    border: 1px solid var(--login-security-border) !important;
    color: var(--login-security-text) !important;
}

/* Trust indicators */
.login-card .trust-indicators {
    border-top: 1px solid var(--login-divider) !important;
    padding-top: 16px !important;
    margin-top: 25px !important;
}

.login-card .trust-indicators small {
    color: var(--login-text-muted) !important;
}

.login-card .trust-indicators strong {
    color: var(--login-text-secondary) !important;
}

/* Password toggle */
.login-card .password-toggle {
    background: transparent !important;
    color: var(--login-text-muted) !important;
}

.login-card .password-toggle:hover {
    color: var(--login-accent) !important;
}

/* Validation messages */
.login-card .invalid-feedback {
    background: transparent !important;
    color: #f87171 !important;
}

.login-card .valid-feedback {
    background: transparent !important;
    color: #34d399 !important;
}