/* 
=======================================================================
FILE: navbar_login_dropdown.css
-----------------------------------------------------------------------
FUNKTION:
CSS für das Login-Dropdown in der Navigation
=======================================================================
*/

/* Dropdown Container */
.nav-dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Button/Link */
.nav-dropdown > a,
.nav-dropdown > button {
cursor: pointer;
}

/* Dropdown Content (versteckt standardmäßig) */
.dropdown-content {
display: none;
position: absolute;
background-color: var(--color-paper-darker);
    width: 210px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
    border-radius: 5px;
border: 1px solid var(--color-ink);
margin-top: 34px; 
right: 10px;
    animation: slideInFromTopContent 0.6s ease-out;
}

@keyframes slideInFromTopContent {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dropdown sichtbar machen */
.dropdown-content.show {
display: block;
}

/* Login-Form im Dropdown */
.login-compact {
padding: 5px;
}

.login-compact label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    font-weight: 500;
}

.login-compact input[type="email"],
.login-compact input[type="password"],
.login-compact input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 2px;
border: 1px solid var(--color-ink);
border-radius: 4px;
box-sizing: border-box;
}

/* Klasse wird auf einmal nicht mehr gewertet-das ging eben noch */
.login-compact input[type="email"]:focus,
.login-compact input[type="password"]:focus,
.login-compact input[type="text"]:focus {
    outline: none;
    border-color: var(--color-rubric);
}

/* Erhöhte Spezifität, um die Navbar-Regeln zu überschreiben */
.n-navbar-anmeldebalken .login-compact a.passwortvergessen {
    /* Reset der Box-Eigenschaften */
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    
    /* Reset der Schrift */
    color: var(--color-ink); 
    text-decoration: underline;
    font-family: inherit; 

     /* styling */
    font-size: 0.8em;
    margin-top: 20px;
}

/* Den Hover-Effekt der Navbar komplett neutralisieren */
.n-navbar-anmeldebalken .login-compact a.passwortvergessen:hover {
    background-color: transparent;
    color: var(--color-rubric); /* Nur die Textfarbe ändert sich */
    text-decoration: none;
}


#dropdown_email, #dropdown_password, #dropdown_reg_email,
#dropdown_reg_nickname, #dropdown_reg_password {
background-color: var(--color-paper);
}

.user-status {
    font-size: 0.9em;
    margin-top: 4px;
    margin-right: 7px;
    padding: 3px;
display: block;
    background-color: var(--color-paper-darker);
        border: 1px solid var(--color-ink);
}

.user-status.animate-in {
    animation: slideInFromTop 1s ease-out;
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* das sieht nicht gut aus: zu weites reinrollen, und nur der Inhalte, nicht des Rahmens!
.login-compact { 
    animation: slideInFromTop 1s ease-out;
}
*/

.login-compact .message {
    font-size: 0.85em;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.login-compact .error-message {
    background-color: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

/* Responsive: Auf mobilen Geräten volle Breite */
@media (max-width: 768px) {
    .dropdown-content {
        right: auto;
        left: 0;
        width: 100%;
        min-width: auto;
    }
}