/* css/style.css */

.container { 
    display: flex; 
    border: 1px solid #4e92ca; 
    border-radius: 5px; 
    overflow: hidden; 
}

.menu { 
    flex: 0 0 200px; 
    background: #e6f7ff; 
    padding: 10px; 
    margin-top: 20px; 
    border: 1px solid #4e92ca; 
    border-radius: 5px; 
}

.menu a { 
    display: block; 
    margin-bottom: 5px; 
    padding: 5px; 
    background: #f0f8ff; 
    color: #000000; 
    text-decoration: none; 
    border: 1px solid #4e92ca; 
    border-radius: 5px; 
    text-align: center; 
}

.menu a:hover { 
    background: #c6e2ff; 
}

.menu a.current-page { 
    background: #4e92ca; 
    color: #ffffff; 
}

.content { 
    display: flex; 
    flex-direction: row; 
    flex: 1; 
    padding: 10px; 
}

.scrollable-container { 
    height: 830px; 
    overflow-y: auto; 
}

.result-container {
    background: #e6f7ff; /* Hellblau ähnlich SAP */ 
    width: 100%;
    padding: 10px;
    margin-top: 20px; 
    margin-left: 5px;
    border: 1px solid #4e92ca; /* Dunklerer Blauer Rand ähnlich SAP */ 
    border-radius: 5px; 
    overflow-x: auto; 
}

.result-container p {
    margin: 5px 0; /* Abstand zwischen den Zeilen */
    display: flex;
    align-items: center; /* Zentriert die Elemente vertikal */
}

/* Farblich abgesetzte Kästchen für Spalteninhalt */
.result-container p span.label {
    display: inline-block;
    width: 150px; /* Feste Breite für die Bezeichnung, anpassen nach Bedarf */
    font-weight: bold;
}

.result-container p span.value {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    min-height: 15px; /* Feste Mindesthöhe für das Kästchen mit dem Feldinhalt, anpassen nach Bedarf */
    display: flex;
    align-items: center; /* Zentriert die Schrift vertikal */
    line-height: 0.5; /* Verhältnis zwischen Höhe und Schriftgröße, anpassen nach Bedarf */
    overflow-y: auto; /* Bei Überlauf wird ein Scrollbalken angezeigt */
    padding: 10px;
    background: #f0f8ff; /* Hellere Blaue Hintergrundfarbe für die Kästchen mit dem Feldinhalt */
    border: 1px solid #4e92ca; /* Dunklerer Blauer Rand für die Kästchen mit dem Feldinhalt */
    border-radius: 5px;
    margin-bottom: 5px; /* Abstand zwischen den Kästchen */
}

/* Verstecke die komplette Zeile bei leerem Feldinhalt */
.result-container p:empty {
    display: none;
}

/* Gemeinsame Stile für Tabelle */
.result-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed;
}

.result-container th,
.result-container td {
    border: 1px solid #4e92ca; /* Dunklerer Blauer Rand ähnlich SAP */
    padding: 8px;
    text-align: left;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.result-container thead { 
    position: sticky; 
    top: 0; 
    background: #d6e7ef; /* #e6f7ff */
    z-index: 2; /* erhöht das Z-Index, um sicherzustellen, dass es oben bleibt */ 
}

.result-container tbody { 
    max-height: calc(100vh - 250px); /* Passen Sie die maximale Höhe entsprechend Ihrem Layout an */
}

.result-container tr.odd { 
    background: #f0f8ff; /* Hintergrundfarbe für ungerade Zeilen #ACC8F0 */ 
}

.input-field { 
    width: 90%; 
}

/* Hinzufügen von Farben für abwechselnde Zeilen */
.result-container tr:nth-child(even) {
    background: #e8f0f8; /* Hellere Hintergrundfarbe für gerade Zeilen (Blau in anderer Helligkeitsstufe) */
}

/* Farblich abgesetzte Kästchen für Tabellenzellen */
.result-container td {
    border: 1px solid #4e92ca; /* Dunklerer Blauer Rand für die Kästchen mit dem Feldinhalt */
    margin-bottom: 5px; /* Abstand zwischen den Kästchen */
}

/* Verstecke die komplette Zeile bei leerem Feldinhalt */
.result-container p:empty {
    display: none;
}

/* Weitere Styles nach Bedarf hinzufügen */