/* Login Page Styles - Dark Mode */

.layout-admin-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-xl);
}

/* Language Switcher Dropdown - Login-spezifische Position */
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-switcher-button {
    color: var(--color-text-primary);
    font-size: var(--font-size-09rem);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-blue-rgba-15);
    border: 1px solid var(--color-primary-blue-rgba-30);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.language-switcher-button:hover {
    background: var(--color-primary-blue-rgba-25);
    border-color: var(--color-primary-blue-rgba-50);
}

.dropdown-arrow {
    font-size: var(--font-size-sm);
    transition: transform var(--transition-normal);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.language-switcher.active .dropdown-arrow {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-width: 150px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--color-black-rgba-40);
    z-index: 1001;
}

.language-switcher.active .language-dropdown {
    display: flex;
}

.language-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-09rem);
    padding: var(--spacing-md) var(--spacing-md);
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.language-option:last-child {
    border-bottom: none;
}

.language-option:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.language-option.active {
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.language-option.active .flag-icon {
    opacity: 1;
}

.flag-icon {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: none;
    flex-shrink: 0;
}

.language-switcher-button .flag-icon {
    margin-right: var(--spacing-xs);
}

/* Animated Grid Background */
.layout-admin-login-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(var(--color-primary-blue-rgba-08) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-primary-blue-rgba-08) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* Animated Dots/Particles */
.layout-admin-login-body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(circle, var(--color-info-blue-rgba-20) 1px, transparent 1px),
        radial-gradient(circle, var(--color-purple-rgba-20) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    background-position: 0 0, 25px 25px;
    animation: 
        particleFloat1 10s ease-in-out infinite,
        particleFloat2 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes particle-float-1 {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
}

@keyframes particle-float-2 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.login-wrapper {
    max-width: 550px;
    width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.login-container {
    background: linear-gradient(145deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: 
        0 20px 60px var(--color-black-rgba-80),
        0 0 0 1px var(--color-border),
        inset 0 1px 0 var(--color-white-rgba-03),
        0 0 80px var(--color-primary-light);
    border: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
}

/* Border Beam Animation */
.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(
        60deg,
        transparent,
        transparent,
        transparent,
        var(--color-info-blue-rgba-60),
        var(--color-purple-rgba-60),
        transparent,
        transparent,
        transparent
    );
    background-size: 300% 300%;
    animation: border-beam 6s linear infinite;
    /* stylelint-disable property-no-vendor-prefix, declaration-property-value-no-unknown */
    -webkit-mask: 
        linear-gradient(var(--color-text-white) 0 0) content-box, 
        linear-gradient(var(--color-text-white) 0 0);
    -webkit-mask-composite: xor;
    /* stylelint-enable property-no-vendor-prefix, declaration-property-value-no-unknown */
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

@keyframes border-beam {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-header {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-info-blue-rgba-10) 0%, var(--color-info-blue-dark-rgba-05) 100%);
    border-bottom: 1px solid var(--color-white-rgba-08);
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.login-icon {
    font-size: var(--font-size-4rem);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}


.login-subtitle {
    color: var(--color-text-gray-material);
    font-size: var(--font-size-095rem);
    margin-bottom: 0;
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.login-form {
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.form-group {
    margin-bottom: var(--spacing-xl);
}

.required-field {
    color: var(--color-error-red-darker);
    margin-left: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

/* Login-spezifische Button-Container-Anpassungen */
.login-form-button-container {
    width: 100%;
    margin-top: var(--spacing-sm);
}

.oauth-divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-lg) 0;
    text-align: center;
    position: relative;
}

.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-gray-rgba-40),
        transparent
    );
}

.oauth-divider span {
    padding: 0 var(--spacing-lg);
    color: var(--color-text-gray-bootstrap-light);
    font-size: var(--font-size-085rem);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.google-oauth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background-white);
    color: var(--color-text-gray-bootstrap);
    border: 1px solid var(--color-border-gray);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-095rem);
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: 
        0 2px 4px var(--color-black-rgba-10),
        0 1px 2px var(--color-black-rgba-08);
    position: relative;
    overflow: hidden;
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.google-oauth-button:hover {
    background: var(--color-background-gray-pale);
    border-color: var(--color-border-gray);
    box-shadow: 
        0 4px 8px var(--color-black-rgba-15),
        0 2px 4px var(--color-black-rgba-10);
    transform: translateY(-1px);
}

.google-oauth-button:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 2px var(--color-black-rgba-10),
        0 0 1px var(--color-black-rgba-08);
}

.google-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.error-message {
    background: linear-gradient(135deg, var(--color-error-red-rgba-15) 0%, var(--color-error-red-dark-rgba-10) 100%);
    border: 1px solid var(--color-error-red-rgba-30);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    color: var(--color-error-red-pale);
    font-size: var(--font-size-09rem);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.error-message::before {
    content: '⚠';
    font-size: var(--font-size-12rem);
    flex-shrink: 0;
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.success-message {
    background: linear-gradient(135deg, var(--color-success-green-rgba-15) 0%, var(--color-success-green-dark-rgba-10) 100%);
    border: 1px solid var(--color-success-green-rgba-30);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    color: var(--color-success-green-pale);
    font-size: var(--font-size-09rem);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.success-message::before {
    content: '✓';
    font-size: var(--font-size-12rem);
    flex-shrink: 0;
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.login-footer {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-top: 1px solid var(--color-white-rgba-08);
    background: var(--color-black-rgba-20);
    position: relative;
    z-index: 1;
}

.login-footer p {
    color: var(--color-text-gray-bootstrap-light);
    font-size: var(--font-size-085rem);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.default-credentials {
    background: var(--color-info-blue-rgba-10);
    border: 1px solid var(--color-info-blue-rgba-20);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-08rem);
    color: var(--color-primary-blue-lightest);
    line-height: var(--line-height-normal);
}

@media only screen and (width <= 600px) {
    .login-header,
    .login-form,
    .login-footer {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
    
    .widget-headline-admin-login-h1 {
        font-size: var(--font-size-16rem);
    }
    
    .login-icon {
        font-size: var(--font-size-3xl);
    }
}