/* ---------------- GLOBAL ---------------- */
*, *::before, *::after {
    box-sizing: border-box; /* vigtigt for korrekt bredde inkl. padding og border */
    margin: 0;
    padding: 0;
}

/* Flex-container under menu */
.flex-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--menu-height, 0px));
    gap: 0;
}

/* ---------------- TOP BLOCK ---------------- */
.top-block {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid black;
    align-items: center;
}

.top-block > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    border-right: 1px solid black; /* lodret streg mellem felterne */
}

.top-block > div:last-child {
    border-right: none; /* sidste felt uden streg */
}

/* Top-felter med flex-forhold i stedet for width */
.clock { flex: 3; }      /* ca 15% */
.user-id { flex: 1; }    /* ca 5% */
.user-name { flex: 13; justify-content: flex-start; padding-left: 5px; } /* ca 65% */
.extra { flex: 3; }      /* ca 15% */

/* ---------------- MIDDLE BLOCK ---------------- */
.middle-block {
    flex: 1 1 auto;
    display: flex;
    border-bottom: 1px solid black;
    overflow: hidden;
}

.left-panel {
    width: 20%;
    border-right: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid black;
}

/* ---------------- BUND BLOK ---------------- */
.bottom-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Vandrette streger mellem rækkerne */
.bottom-block .row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;              /* fast højde */
    line-height: 38px;         /* centrer tekst lodret */
    border-bottom: 1px solid black;
    box-sizing: border-box;
}

/* Fjern streg på sidste række */
.bottom-block .row:last-child {
    border-bottom: none;
}

/* Midterste række med bokse */
.row-with-boxes {
    display: flex;
    height: 38px;
}

/* Felter med lodret streg mellem sig */
.row-with-boxes .box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1; /* felterne deler plads dynamisk, kan overskrives med flex: 0 0 X% */
}

/* Lodrette streger */
.row-with-boxes .box:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: black;
}