.bg-header {
    background-color: var(--background-color) !important;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--detail-text-color) !important
}
.navbar-brand {
    color: var(--detail-text-color) !important
}
.navbar-toggler-icon {
    background-color: var(--detail-text-color) !important
}
.navbar-brand-image {
    height: 60px
}
.img-thumbnail {
    background-color: unset;
    border: unset;
}

.footer-link {
    color: var(--detail-text-color) !important
}

.footer {
    color: var(--detail-text-color) !important;
    background-color: var(--background-color) !important;
    position: fixed;
    bottom:0;
    left:0;
    width: 100%;
    z-index: 1000;

    /* Optional: Add a shadow so it separates from the content visually */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
.tech {
    font-size: 60% !important;
    font-weight: 100 !important;
}

.datepicker td, .datepicker th {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
}

.datepicker-date {
    font-size: large;
}

.occupation {
    border: 1px solid black;
}

.occupationhour {
    width: 10px;
    height: 27px;
}

.reservation {
    background-color: #357043 !important;
}

.room {
    border: 1px black;
    border-style: groove;
    border-radius: 16px;
}

/* 1. Map your variables to Vaadin's internal variables inside the header */
.bg-header {
    /* Overrides the default Blue color for Vaadin components */
    --lumo-primary-text-color: var(--detail-text-color);

    /* Overrides the default Dark Grey color for text/icons */
    --lumo-body-text-color: var(--detail-text-color);

    /* Overrides the Hamburger Menu (DrawerToggle) color */
    --lumo-contrast-80pct: var(--detail-text-color);
}

/* 2. SPECIFIC FIX: Force the "Administratie" (MenuBar) buttons to be white */
/* The !important is needed to override the default "Tertiary Blue" style */
.bg-header vaadin-menu-bar vaadin-menu-bar-button {
    color: var(--detail-text-color) !important;
}

/* 3. Ensure the overflow button (the '...' on mobile) is also white */
.bg-header vaadin-menu-bar::part(overflow-button) {
    color: var(--detail-text-color) !important;
}


/* Timeline view */
.schedule-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Name column | Timeline */
    gap: 1px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    overflow-x: auto;
}

/* Header */
/* Container */
.schedule-grid {
    display: grid;
    grid-template-columns: 140px 1fr; /* Name | Timeline */
    gap: 1px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    position: relative;
    overflow-y: hidden;
    /* Remove fixed height so it fits inside the Tab content */
}

/* Header - COMPACT */
.time-header-row {
    grid-column: 2;
    display: flex;
    background: white;
    border-bottom: 2px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 30;
    height: 25px; /* Compact header */
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Rows - COMPACT SIZE */
.table-name-cell {
    position: sticky;
    left:0;
    z-index: 25;
    background: white;
    border-right: 1px solid #ccc;

    padding: 0 8px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    height: 35px; /* Smaller height (was 50px) */
    font-size: 0.85rem; /* Smaller font */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-lane {
    background: white;
    position: relative;
    height: 35px; /* Match name cell height */
    border-bottom: 1px solid #eee;
}

/* Reservation Block */
.reservation-block {
    position: absolute;
    top: 4px;    /* Tighter spacing */
    bottom: 4px;
    background-color: var(--lumo-primary-color);
    color: white;
    border: 2px solid white;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 0.75rem; /* Smaller font */
    line-height: 27px; /* Vertically center text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    z-index: 1;
}
.reservation-block:hover {
    z-index: 5;
    filter: brightness(1.1);
}

/* ... existing styles ... */

.current-time-line {
    grid-column: 2;        /* Restrict to the timeline column */
    grid-row: 1 / span 1000;      /* Span from the very top header to the very bottom */
    position: absolute;    /* Float over the content */
    top: 0;
    bottom: 0;
    width: 2px;            /* Thickness of the line */
    background-color: red;
    z-index: 20;           /* On top of everything */
    pointer-events: none;  /* Allow clicking through to reservations behind it */
    opacity: 0.6;
}

/* Optional: Add a small circle at the top */
.current-time-line::after {
    content: '';
    position: absolute;
    top: 25px; /* Adjust based on your header height to sit just below it */
    left: -4px; /* Center on the 2px line */
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}