/* Allgemeine Stile */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Hauptcontainer für Flexbox-Layout */
.main-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* Abstand zwischen Sidebar und Formular */
    padding: 20px; /* Abstand zum Fensterrand */
    max-width: 100%; /* Nimmt die gesamte Breite des Fensters ein */
    margin: 0 auto; /* Zentriert den Hauptcontainer */
}

/* Header- und Button-Container */
.header-container {
    display: flex;
    justify-content: space-between; /* Platz zwischen h2 und Button */
    align-items: center; /* Vertikal zentrieren */
    margin-top: 0px;
    max-height: 20px;
}

/* Sidebar */
.sidebar {
    width: 250px; /* Feste Breite der Sidebar */
    max-width: 300px; /* Maximale Breite der Sidebar */
    position: fixed;
    top: 20px;
    left: 10px;
    align-self: flex-start;
    margin-left: 0px; /* Maximaler Abstand zum linken Rand */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    background-color: #ffffff; /* Hintergrundfarbe für bessere Abgrenzung */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */
}

/* Formular-Container */
.form-container {
    flex: 1; /* Nimmt den verbleibenden Platz ein */
    max-width: 950px; /* Maximale Breite des Formulars */
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative; /* Für den Logout-Button */
}

/* Logout-Button */
.logout-button {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    z-index: 1000;
    transition: background-color 0.3s ease;
    width: auto; /* Breite an den Inhalt anpassen */
}

.logout-button:hover {
    background-color: #c82333;
}

/* Flexibles Layout für die Formularzeilen */
.form-row {
    display: flex;
    flex-direction: row;
    gap: 20px; /* Abstand zwischen den Feldern */
    margin-bottom: 20px; /* Abstand zwischen den Zeilen */
    min-width: auto;
}

/* Formulargruppen */
.form-group {
    flex: 1; /* Jede Gruppe nimmt den verfügbaren Platz gleichmäßig ein */
    margin-bottom: 15px;
}

.form-group.full-width {
    flex: 100%; /* Notiz nimmt die gesamte Breite ein */
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    text-align: left;
}

/* Eingabefelder */
input, select, textarea, button {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

input[readonly] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

textarea {
    resize: vertical; /* Ermöglicht vertikales Resizing */
    min-height: 100px; /* Mindesthöhe */
}

/* Dropdown-Felder anpassen */
select {
    appearance: none; /* Entfernt den Standard-Pfeil */
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    height: 2.5rem;
}

/* Buttons */
button[type="submit"], .back-button {
    width: 100%;
    padding: 0.75rem;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

button[type="submit"]:hover, .back-button:hover, .logout-button:hover {
    background-color: #218838;
}

button[type="submit"]:active, .back-button:active, .logout-button:active {
    background-color: #6c757d; /* Grau beim Klicken */
}

/* Spezifische Buttons */
.back-button {
    background-color: #6c757d;
    margin-top: 10px;
}

.back-button:hover {
    background-color: #5a6268;
}

/* Stil für den Datenbank-Hinweis */
.database-info {
    font-size: 14px;
    color: #666;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 20px; /* Abstand zwischen Datenbank-Info und Links */
}

.download-button {
    background-color: #4CAF50; /* Grün */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.download-button:disabled {
    background-color: #cccccc; /* Grau */
    cursor: not-allowed;
}

.weiter-button {
    background-color: #008CBA; /* Blau */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* Links in der Sidebar */
.add-auftraggeber-link,
.add-dolmetscher-link,
.add-einsatz-link,
.add-sprache-link,
.add-übersetzer-link,
.add-kunde-link,
.add-ausgangssprache-link,
.add-zielsprache-link,
.add-auftragseinrichtung-link {
    display: block; /* Jeder Link in einer neuen Zeile */
    font-size: 12px;
    color: #007bff;
    text-decoration: none;
    background-color: #f9f9f9;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 8px; /* Abstand zwischen den Links */
    transition: background-color 0.3s ease;
    width: 100%; /* Volle Breite des Containers */
    box-sizing: border-box; /* Padding und Border in der Breite berücksichtigen */
}



.add-auftraggeber-link:hover, .add-dolmetscher-link:hover, .add-einsatz-link:hover, .add-sprache-link:hover,.add-übersetzer-link:hover,
.add-kunde-link:hover,
.add-ausgangssprache-link:hover,
.add-zielsprache-link:hover,
.add-auftragseinrichtung-link:hover {
    background-color: #e9ecef;
}

/* Stile für die Suggestions */
.suggestions-wrapper {
    position: relative;
}

.suggestions-container {
    border: none;
    background: #ffffff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 0px;
    padding: 0px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-sizing: border-box;
}

/* Stil für die Vorschlagselemente */
.suggestion-item {
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s ease-in-out, transform 0.1s ease-in-out;
    border-radius: 4px;
}

.suggestion-item:hover {
    background: rgb(164, 196, 255);
    transform: scale(1.02);
}




/* Responsive Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Sidebar und Formular untereinander */
        gap: 20px; /* Weniger Abstand zwischen Sidebar und Formular */
    }

    .sidebar {
        width: 100%; /* Sidebar nimmt die volle Breite ein */
        position: static; /* Sidebar nicht mehr sticky */
    }

    .form-container {
        max-width: 100%; /* Formular nimmt die volle Breite ein */
        margin: 0 auto; /* Abstand zum rechten und linken Rand */
    }

    .form-row {
        flex-direction: column; /* Felder nebeneinander anordnen */
    }

    .form-group {
        min-width: 300px;
        flex: 100%; /* Jedes Feld nimmt die volle Breite ein */
    }

    .login-container {
        padding: 1rem;
        margin: 10px;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.0rem;
    }

    input, select, textarea, button {
        font-size: 0.9rem;
    }
}