/* Allgemeine Stile für die Webseite */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* relativer Pfad vom styles-Ordner zur Bilddatei */
    background-image: url('../assets/images/buettenpapier-textur.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: #f8f4ef; /* dezente Fallback-Farbe falls Bild nicht geladen wird */
}

/* Stile für die Überschrift */
h1 {
    text-align: center; /* Zentriert die Überschrift */
    color: #211eb9; /* Dunkle Schriftfarbe */
    font-size: 48px; /* Schriftgröße */
    margin-bottom: 20px; /* Abstand nach unten */
    font-family: 'Georgia', serif; /* Schriftart ändern */
}

/* Allgemeine Stile für Eingabefelder */
input {
    width: 80%; /* Eingabefeld nimmt (fast) die gesamte Breite des Containers ein */
    padding: 10px; /* Innenabstand im Eingabefeld */
    margin: 10px 0; /* Abstand nach oben und unten */
    border: 1px solid #ccc; /* Grauer Rahmen */
    border-radius: 20px; /* Abgerundete Ecken */
    font-size: 16px; /* Schriftgröße */
}

/* neue Regeln für Selects im Formular */
select, select#dropdown, select#deliveryNote {
    min-width: 180px;    /* verhindert zu kleine Pulldowns */
    max-width: 400px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    background-color: white;
}

/* optional: macht Selects flexibel in der Formular-Flexbox */
form select {
    flex: 0 0 auto; /* verhindert, dass Select auf 0 schrumpft */
}

/* Spezifische Stile für das Text-Eingabefeld */
input[type="text"] {
    padding: 10px;
    border: 2px solid #ccc; /* Etwas dickerer Rahmen */
    border-radius: 20px; /* Abgerundete Ecken */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 3D-Schatteneffekt */
    font-size: 16px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Animation bei Fokus */
}

/* Fokus-Stil für das Text-Eingabefeld */
input[type="text"]:focus {
    border-color: #007BFF; /* Rahmenfarbe beim Fokus */
    box-shadow: 2px 2px 8px rgba(0, 123, 255, 0.5); /* Intensiverer Schatten beim Fokus */
    outline: none; /* Entfernt den Standard-Fokusrahmen */
}

/* Stile für den Button */
button {
    background-color: #71b0e4; /* Blaue Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
    padding: 10px 15px; /* Innenabstand */
    border: none; /* Kein Rahmen */
    border-radius: 10px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger wird zur Hand beim Hover */
    font-size: 16px; /* Schriftgröße */
}

/* Hover-Effekt für den Button */
button:hover {
    background-color: #4d18c9; /* Dunkleres Blau beim Hover */
}

/* Stile für das Formular */
form {
    max-width: 1000px; /* z.B. 800px statt 400px */
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: transparent; /* Eingabemaske mit Pulldownmenus */
}

/* Neuer Code für den Container */
.table-container {
    max-width: 800px; /* Maximale Breite des Containers */
    margin: 20px auto; /* oben, rechts, unten, links */
    padding: 10px; /* Innenabstand */
    background-color: transparent; /* <-- vorher #f9f9f9 */
    border: 1px solid #ddd; /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Stile für Tabellen */
table {
    width: 80%; /* Tabelle nimmt die gesamte Breite des Containers ein */
    margin: 0px 0; /* Abstand nach oben und unten verändert auch den Abstand Tabelle Kuchendiagramm */
    text-align: left; /* Text in der Tabelle linksbündig */
    margin-bottom: 1px; /* Abstand NACH der Tabelle, ggf. noch kleiner setzen */
}

/* Gitternetz für die Tabelle */
.table-container table,
.table-container th,
.table-container td {
    border: 1px solid #151414;
}

.table-container table {
    border-collapse: collapse;
}

/* Stile für Tabellenüberschriften */
th {
    background-color: #007BFF; /* Blaue Hintergrundfarbe für die Überschrift */
    color: white; /* Weiße Schriftfarbe */
    padding: 10px; /* Innenabstand */
    border-top-left-radius: 4px; /* Abgerundete obere linke Ecke */
    border-top-right-radius: 4px; /* Abgerundete obere rechte Ecke */
}

/* Stile für Tabellenzellen */
td {
    background-color: #f2f2f2; /* Tabellenhintergrund */
    padding: 10px; /* Innenabstand */
    border-bottom: 1px solid #ddd; /* Unterer Rahmen */
}

/* Letzte Zeile der Tabelle ohne unteren Rahmen */
tr:last-child td {
    border-bottom: none; /* Entfernt den unteren Rahmen der letzten Zeile */
}

/* Stil für das Kuchendiagramm */
#pieChart {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;      /* Abstand VOR dem Piechart */
    margin-bottom: 0;   /* Abstand NACH dem Piechart */
}

/* Spalte "Anfangszeit" einstellen */
th:nth-child(2),
td:nth-child(2) {
    min-width: 80px; /* oder ein anderer Wert nach Wunsch */
    width: 80px;
}
/* Spalte "Endzeit" einstellen */
th:nth-child(3),
td:nth-child(3) {
    min-width: 80px; /* oder ein anderer Wert nach Wunsch */
    width: 80px;
}
/* Spalte "Anlieferdatum" einstellen */
th:nth-child(11),
td:nth-child(11) {
    min-width: 80px; /* oder ein anderer Wert nach Wunsch */
    width: 80px;
}

/* Zusätzlicher Stil für die Tabellen in .table-container */
.table-container table {
    margin-left: 0; /* verhindert leeres Ruleset - passt Layout nicht negativ an */
}

/* Für Bildschirme bis 600px Breite */
@media (max-width: 600px) {
    .table-container {
        max-width: 100%;
        margin: 5px;
        padding: 2px;
    }
    table {
        width: 100%;
        font-size: 14px;
    }
}
/* Für Bildschirme bis 1530px Breite */
@media (max-width: 1530px) {
    .table-container {
        max-width: 100%;
        width: 100%;
        margin: 5px auto;
        padding: 2px;
    }
    .table-container table {
        width: 100%;
        font-size: 14px;
        margin-left: 0;
    }
    form {
        max-width: 100%;
        width: 100%;
        margin: 5px auto;
        padding: 2px;
    }
}