.page {
    display: flex;
    flex-direction: column;
    height: 75vh;
    /* volle Höhe des Viewports */
}

.lbody {
    height: 100vh;
    display: grid;
}

.lbody>div {
    place-self: center;
}

.table-checked {
    --bs-table-bg: #b5e2c0 !important;
    background-color: #b5e2c0 !important;
    color: #383e42;
}

.table-checked:hover {
    --bs-table-bg: #87c994 !important;
    background-color: #87c994 !important;
    /* Beispiel für Hover-Farbe */
    color: #1e262a;
    /* Beispiel für Hover-Textfarbe */
}

.w-20 {
    width: 20%;
    /* Feste Breite für bestimmte Spalten */
}

.cellButtonLarge {
    width: 100px;
}

.cellButtonSmall {
    width: 50px;
}

.verticalLine {
    border-left: 2px solid #c0c0c0;
    margin: 8px;
}

.horizontalLine {
    border-bottom: 2px solid #c0c0c0;
    margin: 8px 0;
    grid-column: span 3;
}

.user-container {
    flex: 1;
}

.fit-content {
    height: fit-content !important;
}



#spmenu,
#spsubmenu {
    width: auto !important;
    max-width: fit-content !important;
}

.redhand {
    color: #FF0000;
}

/* Und im CSS: */
#llcontent {
    flex: 1 1 0;
    /* nimmt den verbleibenden Platz ein */
    display: flex;
    overflow: hidden;
    /* Eltern clippt, Kinder scrollen */
    min-height: 0;
    /* zwingt das Flex-Item, in seinen Container zu schrumpfen */
}

#ladeliste button {
    position: relative;
    /* nötig, damit ::before sich relativ zum Button positioniert */
    transition: all 0.4s ease-in-out;
    /* deine bisherigen Styles … */
    margin-left: 12px;
}

/* 1) Normaler Zustand – Balken unsichtbar */
#ladeliste button::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 8px;
    height: 100%;
    background-color: black;
    /* Default-Farbe (für Active-State) */
    border-radius: 4px;
    opacity: 0;
    transition: background-color 0.2s ease, opacity 0.2s ease, width 0.2s ease;
    pointer-events: none;
}

/* 2) Hover auf JEDEM Button – Balken grau und sichtbar */
#ladeliste button:hover::before {
    background-color: gray;
    opacity: 1;
}

/* 3) Active-State – Balken schwarz und sichtbar */
#ladeliste button.active::before {
    background-color: black;
    opacity: 1;
}

/* Optional: noch etwas breiter beim Hover auf dem aktiven Button */
/* #ladeliste button.active:hover::before {
    background-color: gray;
} */

/* 2) Ladeliste: fixe Breite, scrollbar, und allow shrinking */
#ladeliste {
    flex: 0 0 250px;
    /* fixe Breite */
    min-width: 0;
    /* wichtig, damit es sich zusammenziehen kann */
    min-height: 0;
    overflow-y: auto;
}

/* 3) Artikelliste: flexible Breite, scrollbar */
#artikelliste {
    flex: 1 1 0;
    min-width: 0;
    /* wichtig, damit Flexbox es nicht zu breit zwingt */
    min-height: 0;
    overflow-y: auto;
}

/* Page-Logs komplett in Column auf 75vh */
#page_Logs {
    display: flex;
    flex-direction: column;
    height: 75vh;
}

/* Inneres flex-column-Wrapper-Element füllt den Raum und clippt */
#page_Logs>.d-flex.flex-column {
    flex: 1 1 0;
    /* zieht sich auf die 75vh minus Header/Margin */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* stellt sicher, dass nur die Kinder scrollen */
}

/* Log-Content wird flexibel und scrollbar */
#page_Logs>.d-flex.flex-column>#log-content {
    flex: 1 1 0;
    /* nimmt den restlichen Raum im Wrapper ein */
    min-height: 0;
    /* extrem wichtig, damit overflow greift */
    overflow-y: auto;
    /* eigenständige Scrollbar */
}

/* 1) Page-Mitarbeiter auf 75vh und Column */
#page_Mitarbeiter {
    display: flex;
    flex-direction: column;
    height: 75vh;
}

/* 2) Wrapper (d-flex.flex-column) füllt den Raum, clippt Überlauf */
#page_Mitarbeiter>.d-flex.flex-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3) Die einzige Zeile (d-flex.flex-row) nimmt den Rest, clippt ebenfalls */
#page_Mitarbeiter>.d-flex.flex-column>.d-flex.flex-row {
    flex: 1 1 0;
    display: flex;
    gap: 0.5rem;
    /* entspricht bootstrap gap-2 */
    overflow: hidden;
}

/* 4) Jeder der beiden Blöcke wird Column mit eigenem Overflow */
#Ma-user>.d-flex.flex-column,
#Ma-packer {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden;
}

/* 5) Die „Fix“-Zeile (Buttons) shrinkt nicht und scrollt nicht mit */
#Ma-user>.d-flex.flex-column>.d-flex.flex-row,
#Ma-packer>.d-flex.flex-row {
    flex: 0 0 auto;
}

/* 6) Die Tabellen selbst werden block‑level, nehmen Resthöhe und scrollen */
#Ma-user table,
#Ma-packer table {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    /* ganz wichtig, damit overflow greift */
    overflow-y: auto;
    width: 100%;
    /* damit Spaltenbreiten wie gewohnt bleiben */
}

/* 1) Page-SpedEinstellungen ist schon .page (75vh, flex-col) */

/* 2) Innerer Wrapper saugt sich auf und clippt Überlauf */
#page_SpedEinstellungen>.d-flex.flex-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3) Menü, Submenu, Linie und Extras bleiben fix */
#page_SpedEinstellungen>.d-flex.flex-column>#spmenu,
#page_SpedEinstellungen>.d-flex.flex-column>#spsubmenu,
#page_SpedEinstellungen>.d-flex.flex-column>.hr,
#page_SpedEinstellungen>.d-flex.flex-column>#spextras {
    flex: 0 0 auto;
}

/* 4) Content-Bereich füllt Resthöhe und scrollt */
#page_SpedEinstellungen>.d-flex.flex-column>#spcontent {
    flex: 1 1 0;
    min-height: 0;
    /* extrem wichtig, damit overflow greift */
    overflow-y: auto;
    /* nur dieser Bereich bekommt Scrollbar */
}

.logcount {
    top: 0;
    left: 58px;
    background-color: #c0c0c0 !important;
    border-color: #383e42 !important;
    border-style: solid 1px;
}

td {
    padding: 4px !important;
}


.vp-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.boxV {
    width: 440px;
    display: flex;
    flex-direction: column;
}

.boxW {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.scroll-grid {
    overflow-y: auto;
    max-height: calc(100vh - 360px - 80px);
    /* nach Bedarf anpassen */
    display: grid;
    grid-template-columns: auto repeat(5, 1fr) auto;
    gap: 0.5rem;
    padding: 0.5rem;
}

.grid-item {
    display: contents;
    /* damit Kinder im Grid sitzen */
}

.cell {
    padding: 0.25rem;
}

.cell.small {
    width: 66px;
}

.btn-cell {
    text-align: center;
}

.actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.tooltip {
    position: relative;
    cursor: help;
}

/* Tooltip-Box */
.mytooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    /* direkt unter dem Element */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.9em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* Pfeil unter dem Tooltip */
.mytooltip::before {
    content: "";
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* Sichtbar beim Hover */
.mytooltip:hover::after,
.mytooltip:hover::before {
    opacity: 1;
}