/* ========================================
   LOGIN.CSS - Estilos específicos para la página de login
   Usa variables de design-tokens.css para consistencia
   ======================================== */

/* LOGIN DARK THEME COLOR PALETTE
   ===============================
   Using design-tokens.css variables for consistency:
   - Primary Blue: var(--color-primary-500) = #2D8CCA
   - Text Colors: Using high-contrast white/light grays for dark theme
   - Interactive Elements: Primary blue for buttons
   - Dark Surfaces: Semi-transparent dark with glassmorphism
   ===============================*/

.login-dark {
    position: relative;
    background: var(--color-primary-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-dark::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/static/images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: hue-rotate(200deg) saturate(0.8) brightness(0.3) contrast(1.2);
    opacity: 0.4;
    z-index: -1;
}

.login-dark::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradient using primary palette shades */
    background: radial-gradient(1200px 800px at 50% 50%,
        rgba(29, 98, 144, 0.3) 0%,    /* --color-primary-700 */
        rgba(13, 56, 86, 0.6) 40%,    /* --color-primary-900 */
        rgba(13, 56, 86, 0.9) 100%);  /* --color-primary-900 */
    z-index: -1;
    pointer-events: none;
}

/* LOGIN CONTAINER */
.login-dark .login-container {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.login-dark .login-card {
    background: rgba(13, 56, 86, 0.85); /* --color-primary-900 with alpha */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-2xl);
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-2xl);
    text-align: center;
}

/* LOGO AND HEADER */
.login-dark .login-logo img {
    height: 80px;
    width: auto;
    margin-bottom: 1.5rem;
    /* Contorno blanco que sigue la forma del logo usando drop-shadow */
    filter:
        drop-shadow(0 0 0 white)
        drop-shadow(1px 0 0 white)
        drop-shadow(-1px 0 0 white)
        drop-shadow(0 1px 0 white)
        drop-shadow(0 -1px 0 white)
        drop-shadow(2px 0 0 white)
        drop-shadow(-2px 0 0 white)
        drop-shadow(0 2px 0 white)
        drop-shadow(0 -2px 0 white);
}

.login-dark .login-title {
    color: var(--text-inverse); /* Pure white for maximum contrast */
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.login-dark .login-subtitle {
    color: var(--color-primary-100); /* Light blue for subtle secondary text */
    font-size: 0.95rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* FORM ELEMENTS */
.login-dark .form-group {
    text-align: left;
    margin-bottom: 1.5rem;
}

.login-dark .form-label {
    color: var(--text-inverse); /* Pure white for high contrast labels */
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

.login-dark .form-input {
    background: rgba(255, 255, 255, 0.95) !important; /* Almost white background for inputs */
    border: 1px solid var(--color-primary-300) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-gray-900) !important; /* Dark text for readability */
    font-size: 1rem;
    padding: 0.875rem 1rem;
    width: 100%;
    transition: var(--transition-all);
}

.login-dark .form-input:focus {
    outline: none;
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(45, 140, 202, 0.25) !important; /* Primary color glow */
    background: var(--surface-primary) !important;
}

.login-dark .form-input::placeholder {
    color: var(--color-gray-400) !important;
}

/* PASSWORD FIELD */
.login-dark .password-field {
    position: relative;
}

.login-dark .password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: var(--transition-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    z-index: var(--z-raised);
}

.login-dark .password-toggle:hover {
    color: var(--color-primary-500);
}

/* Password icon sizing - CRITICAL: constrain the icon size */
.login-dark .password-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.login-dark .password-icon svg,
.login-dark .password-icon .icon-svg,
.login-dark .password-icon img,
.login-dark .password-toggle svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    color: inherit !important;
    stroke: currentColor !important;
}

/* BUTTONS */
.login-dark .btn-primary {
    background: var(--color-primary-500) !important; /* Primary blue from palette */
    color: var(--text-inverse) !important;
    border: 1px solid var(--color-primary-500) !important;
    font-weight: 600 !important;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    width: 100%;
    margin-top: 1rem;
    transition: var(--transition-all);
    text-shadow: none;
}

.login-dark .btn-primary:hover {
    background: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(45, 140, 202, 0.3);
}

.login-dark .btn-primary:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

/* TEXT ELEMENTS */
.login-dark .text-gray-600 {
    color: var(--color-primary-200) !important;
}

/* CREDENCIALES DE PRUEBA */
.login-dark .text-gray-600 span {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-inverse) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* LINKS */
.login-dark a {
    color: var(--color-accent-500) !important; /* Dorado accent for links */
    transition: var(--transition-colors);
}

.login-dark a:hover {
    color: var(--color-accent-400) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* FOOTER */
.login-dark .login-footer {
    position: relative;
    z-index: var(--z-base);
    margin-top: 2rem;
    text-align: center;
}

.login-dark .login-footer .text-gray-600 {
    color: var(--color-primary-300) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* RESPONSIVE DESIGN */
@media (max-width: 640px) {
    .login-dark {
        padding: var(--spacing-6) var(--spacing-3);
    }

    .login-dark .login-card {
        padding: var(--spacing-10) var(--spacing-8);
        border-radius: var(--radius-xl);
    }

    .login-dark .login-logo img {
        width: 70px;
        margin-bottom: var(--spacing-5);
    }

    .login-dark .login-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-3);
    }

    .login-dark .login-subtitle {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-7);
    }

    .login-dark .form-input {
        padding: var(--spacing-3) var(--spacing-3-5);
        font-size: 0.95rem;
    }

    .login-dark .btn-primary {
        padding: var(--spacing-3) var(--spacing-5);
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .login-dark {
        padding: var(--spacing-4) var(--spacing-2);
    }

    .login-dark .login-card {
        padding: var(--spacing-8) var(--spacing-6);
        border-radius: var(--radius-xl);
    }

    .login-dark .login-logo img {
        width: 60px;
        margin-bottom: var(--spacing-4);
    }

    .login-dark .login-title {
        font-size: var(--font-size-2xl);
    }

    .login-dark .login-subtitle {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-6);
    }
}

/* =============================================================================
   Dark Mode Logo Switching - Login Pages
   ============================================================================= */

/* Login page logo (vertical layout - LTD) */
[data-theme="dark"] .login-page-logo {
    content: url('/static/images/logo/DocFilling_LTD-D.png');
}

/* Login modal logo (vertical layout - LTD) */
[data-theme="dark"] .login-modal-logo {
    content: url('/static/images/logo/DocFilling_LTD-D.png');
}