/* Grundlegende HTML-Einstellungen */
html {
    box-sizing: border-box;    /* Bessere Box-Modell-Berechnung */
    height: 100%;              /* Volle Höhe nutzen */
    font-family: sans-serif;   /* Moderne Schriftart */
}

/* Body-Styling für Flex-Layout */
/* Body-Styling für Flex-Layout */
body {
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 248, 220);
}

/* Hauptbereich zentrieren */
/* Hauptbereich zentrieren */
main {
    display: flex;
    justify-content: center;   /* Horizontale Zentrierung */
}

/* Überschriften zentrieren */
/* Überschriften zentrieren */
h1 {
    text-align: center;
}

/* Container für den Hauptinhalt */
/* Container für den Hauptinhalt */
#container {
    border: 0.0625rem solid black;
    padding: 2.5rem;
    /* GEÄNDERT: Breite erhöht, um 6 Buttons (statt 4) aufzunehmen */
    min-width: 60em;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 🚀 BUTTON-LAYOUT: Flexibel und Zentriert */
.button-container {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;

    /* ⬇️ HIER WICHTIGE ÄNDERUNG: space-around für 6 Elemente ⬇️ */
    display: flex;
    flex-wrap: wrap;
    /* Nutzt den gesamten Platz und verteilt die Container gleichmäßig */
    justify-content: space-around;
    align-items: flex-start;
    gap: 0.5rem;

    margin-top: 6rem;
}

/* Stellt sicher, dass alle Wrapper-Divs in Flexbox richtig funktionieren */
#upload-section,
#download-buttons,
#merge-button-container,
#delete-all-button-container,
/* ⬇️ NEUE CONTAINER HINZUGEFÜGT ⬇️ */
#allocation-button-container,
#allocation-download-container,
#seminarliste-button-container,
#seminarliste-download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Breite beibehalten */
    width: 10rem;
}

/* View-Seminarlisten-Button-Container versteckt (Button ist nicht mehr nötig) */
#view-seminarlisten-button-container {
    display: none;
}

/* Login-Formular-Styling */
#loginForm {
    display: flex;
    flex-direction: column;   /* Vertikale Anordnung der Formularelemente */
}

/* Abstände für Formularelemente */
/* Abstände für Formularelemente */
#loginForm label, button {
    margin-top: 15px;        /* Vertikaler Abstand zwischen Elementen */
}

/* Innenabstand für alle Formularelemente */
/* Innenabstand für alle Formularelemente */
#loginForm * {
    padding: 5px;
}

/* Hilfsklasse für zentrierten Text */
/* Hilfsklasse für zentrierten Text */
.center {
    text-align: center;
}

/* Button Basis-Stil */
button {
    padding: 0.5rem 1rem;
    font-size: 1em;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    white-space: pre-line;
    text-align: center;
    width: 10rem;
    /* ⬇️ Margin-Top entfernt, da es ungleichmäßige Abstände erzeugt hat ⬇️ */
    /* margin-top: 15px; */
}

/* ---------------------------------------------------- */
/* SPEZIFISCHE BUTTON-STILE */
/* ---------------------------------------------------- */

/* ⚪ Upload Button Styling */
.upload-button {
    background-color: #A9A9A9; /* Dunkelgrau */
    color: white;
}

.upload-button:hover {
    background-color: #808080; /* Dunkleres Grau beim Hover */
}

/* 🟢 Download Button Styling (Merge-Datei) */
.download-button {
    background-color: #4CAF50; /* Grün */
    color: white;
}

/* Hover-Effekt für Download-Buttons */
.download-button:hover {
    background-color: #45a049; /* Dunkleres Grün beim Hover */
}


/* 🟠 Merge Button Styling (Bleibt Orange) */
.merge-button {
    background-color: #FFA500;
    color: white;
}

.merge-button:hover {
    background-color: #CC8400;
}

/* 🔴 Delete All Button Styling (Bleibt Rot) */
.delete-all-button {
    background-color: #FF0000;
    color: white;
}

.delete-all-button:hover {
    background-color: #B30000;
}

/* ⬇️ NEU: STILE FÜR ZUTEILUNGS-BUTTONS ⬇️ */

/* 🔵 Blauer Button (Zuteilung STARTEN) */
.allocation-button {
    background-color: #007BFF; /* Blau */
    color: white;
}
.allocation-button:hover {
    background-color: #0056b3;
}

/* 🟢 Grüner Button (Zuteilung DOWNLOAD) */
.download-button-allocation {
    background-color: #28a745; /* Ein anderes Grün */
    color: white;
}
.download-button-allocation:hover {
    background-color: #218838;
}

/* 🟣 Lila Button (Seminarlisten ERSTELLEN) */
.seminarliste-button {
    background-color: #6f42c1; /* Lila */
    color: white;
}
.seminarliste-button:hover {
    background-color: #5a32a3;
}

/* 🟢 Türkiser Button (Seminarlisten DOWNLOAD) */
.download-seminarlisten-button {
    background-color: #17a2b8; /* Türkis */
    color: white;
}
.download-seminarlisten-button:hover {
    background-color: #117a8b;
}

/* ---------------------------------------------------- */
/* ENDE BUTTON STILE */
/* ---------------------------------------------------- */

/* Fehlermeldungs-Styling */
.error-message {
    color: #ff0000;
    font-size: 0.9em;
    margin-top: 5px;
    text-align: center;
}

/* Footer-Bereich */
footer {
    position: fixed;           /* Fixierte Position */
    bottom: 0;                /* Am unteren Rand */
    left: 0;                  /* Am linken Rand */
    width: 100vw;            /* Volle Viewport-Breite */
    max-height: 15vh;        /* Maximale Höhe relativ zum Viewport */
    background-color: lightblue; /* Heller Hintergrund */
    padding: 1rem 0;         /* Vertikaler Innenabstand */
}

/* Styling für das Footer-Bild */
/* Styling für das Footer-Bild */
footer img {
    margin-left: 10vw;
    width: 300px;
    padding: 0.5rem 2rem;
    background: white;
    border-radius: 3rem;
}

/* ================================================== */
/* MODAL-STYLES FÜR SEMINARLISTEN-ANZEIGE */
/* ================================================== */

/* Modal-Hintergrund */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal-Inhalt für Seminarlisten */
.modal-content-seminarliste {
    max-height: 85vh;
    overflow-y: auto;
}

/* Seminarlisten-Tabelle spezifische Styles */
.seminarliste-table {
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
}

.seminarliste-table thead {
    background-color: #007bff !important;
}

.seminarliste-table thead th {
    color: white;
    font-weight: bold;
}

.seminarliste-table tbody tr:hover {
    background-color: #f5f5f5 !important;
}

/* View Seminarlisten Button */
.view-seminarlisten-button {
    background-color: #20c997; /* Grün */
    color: white;
}

.view-seminarlisten-button:hover {
    background-color: #1aa179;
}

/* Seminarlisten Container mit 3 Spalten Grid Layout */
.seminar-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 1200px) {
    .seminar-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .seminar-list-container {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar-Styling für Modal */
.modal-content-seminarliste::-webkit-scrollbar {
    width: 8px;
}

.modal-content-seminarliste::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content-seminarliste::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.modal-content-seminarliste::-webkit-scrollbar-thumb:hover {
    background: #555;
}