/******************************************************************************
 * Projekt : Trading Decision Engine Professional
 * Release : 3.0.3
 * CR      : CR-0003
 * Datei   : public/css/login.css
 * Zweck   : Login-Modal (isolierte Styles)
 ******************************************************************************/

/* Overlay ------------------------------------------------------------ */

.tde-login-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;

    background: rgba(0, 0, 0, 0.65);

    justify-content: center;
    align-items: center;
}

/* Sichtbar */

.tde-login-overlay.is-visible {
    display: flex;
}

/* Dialog ------------------------------------------------------------- */

.tde-login-modal {

    width: 420px;
    max-width: 92vw;

    background: #ffffff;
    color: #222;

    border-radius: 10px;
    padding: 24px;

    box-shadow: 0 18px 45px rgba(0,0,0,.35);

    font-family: Arial, Helvetica, sans-serif;
}

/* Überschrift */

.tde-login-title {

    margin: 0 0 20px 0;

    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

/* Formular */

.tde-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/*
 * Schutz vor globalen Formularregeln der bestehenden index.html.
 * Diese Regeln gelten ausschließlich innerhalb des Login-Modals.
 */

.tde-login-modal label {
    width: auto;
    margin: 0;
    text-align: left;
}

.tde-login-modal input {
    box-sizing: border-box;
}

.tde-login-modal input[type="text"],
.tde-login-modal input[type="password"] {
    width: 100%;
}

.tde-login-modal input[type="checkbox"] {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.tde-login-modal button {
    width: auto;
}
/* Labels */

.tde-login-label {

    font-size: 14px;
    font-weight: bold;
}

/* Eingaben */

.tde-login-input {

    width: 100%;

    padding: 10px;

    font-size: 15px;

    border: 1px solid #bdbdbd;
    border-radius: 6px;

    box-sizing: border-box;
}

.tde-login-input:focus {

    outline: none;

    border-color: #1d73d4;

    box-shadow: 0 0 4px rgba(29,115,212,.35);
}

/* Checkbox */

.tde-login-checkbox {

    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
}

/* Fehler */

.tde-login-error {

    display: none;

    padding: 10px;

    border-radius: 6px;

    background: #ffe4e4;
    color: #b00020;

    font-size: 14px;
}

.tde-login-error.is-visible {
    display: block;
}

/* Buttons */

.tde-login-buttons {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 8px;
}

.tde-login-button {

    min-width: 110px;

    padding: 10px 16px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    transition: background .2s ease;
}

.tde-login-button-primary {

    background: #1d73d4;
    color: #fff;
}

.tde-login-button-primary:hover {

    background: #145ca9;
}

.tde-login-button-secondary {

    background: #d7d7d7;
    color: #222;
}

.tde-login-button-secondary:hover {

    background: #c4c4c4;
}

/* Responsive */

@media (max-width: 600px) {

    .tde-login-modal {

        width: 95vw;

        padding: 18px;
    }

    .tde-login-buttons {

        flex-direction: column;
    }

    .tde-login-button {

        width: 100%;
    }
}