body { overflow-x: hidden; }

.agendatable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    color: #212529;
    font-size: 0.95rem;
}

.agendatable tr:first-child > td:first-child {
    min-width: 4.5rem;
}

.agendath {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1f2937;
    text-align: center;
    white-space: nowrap;
}

.agendatd {
    padding: 0.45rem 0.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
    background: #fff;
}

.agendatd:first-child {
    min-width: 4.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    background: #f8f9fa;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}

.agendatable tr:first-child > .agendath:first-of-type,
.agendatable tr:first-child > td:first-child {
    border-top-left-radius: 0.6rem;
}

.agendatable tr:first-child > .agendath:last-child {
    border-top-right-radius: 0.6rem;
}

.agenda-rij > .agendatd,
.agenda-rij > td {
    min-height: 2.75rem;
}

.agendatd a {
    text-decoration: none;
}

.agendatd a:hover,
.agendatd a:focus {
    text-decoration: underline;
}

.agenda-afspraak-cel {
    padding: 2px;
    vertical-align: top;
    border-radius: 0.55rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.agenda-afspraak {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 0.45rem;
    text-align: left;
    overflow-wrap: anywhere;
}

.agenda-afspraak-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.agenda-afspraak-link:hover,
.agenda-afspraak-link:focus {
    text-decoration: underline;
}

.agenda-afspraak-link {
    position: relative;
}

.agenda-hover-label {
    display: inline-block;
}

.agenda-hover-popup {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 0.35rem);
    transform: translateX(-50%);
    z-index: 30;
    min-width: 16rem;
    max-width: min(24rem, 80vw);
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.4rem;
    background: #fff;
    color: #212529;
    text-align: left;
    white-space: normal;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.18);
}

.agenda-afspraak-link:hover .agenda-hover-popup,
.agenda-afspraak-link:focus .agenda-hover-popup {
    display: block;
}

.agendatd-heel-uur {
    background-color: rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.22);
}

.agenda-afspraak-cel.agendatd-heel-uur .agenda-afspraak {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.12);
}

.agenda-toolbar-card .card-body,
.agenda-day-card .card-body,
.agenda-table-card .card-body {
    min-width: 0;
}

.agenda-toolbar-card {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

.agenda-toolbar-card .card-body {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

.agenda-toolbar-card .agendaknoppen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.55rem;
}

.agenda-toolbar-card .agendaknoppen img {
    display: block;
    max-height: 1.5rem;
    width: auto;
}

.agenda-day-card .text-uppercase {
    letter-spacing: 0.08em;
}

.agenda-table-card {
    overflow: hidden;
}

.agenda-table-wrap {
    width: 100%;
    max-width: 100%;
}

.agenda-table-wrap .agendatable {
    min-width: 100%;
}

.agenda-table-wrap {
    border-radius: 0.75rem;
}

/* Keep the main page shell within the viewport when wide content is rendered inside.
   Without min-width:0 on flex children, the content column can grow beyond the window,
   and the hidden body overflow makes the right side unreachable. */
.d-flex {
    min-width: 0;
}

.d-flex > .flex-grow-1 {
    min-width: 0;
    max-width: 100%;
}

.d-flex > .flex-grow-1 > .container-fluid,
.d-flex > .flex-grow-1 > .container-fluid > .card,
.d-flex > .flex-grow-1 > .container-fluid > .card > .card-body {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.d-flex > .flex-grow-1 > .container-fluid > .card > .card-body {
    overflow-x: auto;
}

.menu-items-page,
.menu-items-shell,
.menu-items-table-shell {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.menu-items-shell {
    padding: 0.75rem 0;
    min-width: 0;
    overflow: visible;
}

.menu-items-table-shell {
    margin-bottom: 1rem;
    min-width: 0;
}

.menu-items-table-scroll {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: clamp(320px, calc(100vh - 280px), 70vh);
    overflow: auto;
    scrollbar-gutter: stable;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 0;
    background: #fff;
}

.menu-items-page .menu-items-table-scroll table,
.menu-items-table-scroll table,
#pageDetails .menu-items-table-scroll table {
    width: max-content;
    min-width: 100%;
}

.menu-items-table-scroll::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.menu-items-table-scrollbar {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 0;
    background: #fff;
    scrollbar-gutter: stable;
}

.menu-items-table-scrollbar > div {
    height: 1px;
}

.menu-items-table-scrollbar.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.menu-items-table-scrollbar::-webkit-scrollbar {
    height: 12px;
}

.menu-items-table-wrap {
    position: relative;
}

.menu-items-table-wrap #menuItemsTable thead th {
    background: #f8f9fa;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.menu-items-table-wrap #menuItemsTable .menu-items-sticky-volgorde,
.menu-items-table-wrap #menuItemsTable .menu-items-sticky-up,
.menu-items-table-wrap #menuItemsTable .menu-items-sticky-down,
.menu-items-table-wrap #menuItemsTable .menu-items-sticky-id,
.menu-items-table-wrap #menuItemsTable .menu-items-sticky-naam {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
    min-width: 0;
    width: auto;
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    background: inherit;
    box-shadow: none;
}

.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-up > .btn,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-down > .btn,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-id > .form-control,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-id > .form-select,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-naam > .form-control,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-naam > .form-select {
    max-width: 100%;
}

.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-id > .form-control,
.menu-items-table-wrap #menuItemsTable td.menu-items-sticky-id > .form-select {
    min-width: 2rem !important;
}

.menu-items-table-wrap #menuItemsTable.table-striped > tbody > tr:nth-of-type(odd) > td.menu-items-sticky-up,
.menu-items-table-wrap #menuItemsTable.table-striped > tbody > tr:nth-of-type(odd) > td.menu-items-sticky-down,
.menu-items-table-wrap #menuItemsTable.table-striped > tbody > tr:nth-of-type(odd) > td.menu-items-sticky-id,
.menu-items-table-wrap #menuItemsTable.table-striped > tbody > tr:nth-of-type(odd) > td.menu-items-sticky-naam {
    background: var(--bs-table-striped-bg);
}

.soorten-act-beheer-table thead tr:first-child > td,
.soorten-act-beheer-table thead tr:first-child > th {
    border-bottom: 0;
    padding-bottom: 0.1rem;
}

.soorten-act-beheer-table thead tr:nth-child(2) > td,
.soorten-act-beheer-table thead tr:nth-child(2) > th {
    border-top: 0;
    padding-top: 0.1rem;
}

.soorten-act-beheer-table tbody tr.lezen > td .form-control,
.soorten-act-beheer-table tbody tr.lezen > td .form-select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(1),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(1) {
    width: 3rem;
    min-width: 3rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(2),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(2) {
    width: 9rem;
    min-width: 9rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(3),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(3) {
    width: 3rem;
    min-width: 3rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(4),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(4) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(5),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(5),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(6),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(6) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(7),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(7) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(8),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(8) {
    width: 8rem;
    min-width: 8rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(9),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(9),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(14),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(14),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(16),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(16),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(20),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(20),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(21),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(21) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(10),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(10),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(12),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(12),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(13),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(13),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(15),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(15) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(11),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(11),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(17),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(17) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(18),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(18),
.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(19),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(19) {
    width: 7rem;
    min-width: 7rem;
}

.soorten-act-beheer-table.soorten-act-beheer-root thead tr > td:nth-child(21),
.soorten-act-beheer-table.soorten-act-beheer-root tbody tr.lezen > td:nth-child(21) {
    width: 4rem;
    min-width: 4rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(1),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(1) {
    width: 3rem;
    min-width: 3rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(2),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(2) {
    width: 9rem;
    min-width: 9rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(3),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(3) {
    width: 1rem;
    min-width: 1rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(4),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(4) {
    width: 3rem;
    min-width: 3rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(5),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(5) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(6),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(6),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(7),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(7) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(8),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(8) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(9),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(9) {
    width: 8rem;
    min-width: 8rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(10),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(10),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(15),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(15),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(17),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(17),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(21),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(21),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(22),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(22) {
    width: 5rem;
    min-width: 5rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(11),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(11) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(12),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(12),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(13),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(13),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(14),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(14),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(16),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(16) {
    width: 6rem;
    min-width: 6rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(18),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(18) {
    width: 7rem;
    min-width: 7rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(19),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(19),
.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(20),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(20) {
    width: 7rem;
    min-width: 7rem;
}

.soorten-act-beheer-table.soorten-act-beheer-detail thead tr > td:nth-child(22),
.soorten-act-beheer-table.soorten-act-beheer-detail tbody tr.lezen > td:nth-child(22) {
    width: 4rem;
    min-width: 4rem;
}

.soorten-act-back-link:focus:not(:focus-visible) {
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
    box-shadow: none;
    outline: none;
}

.menu-items-table-wrap #menuItemsTable.table-hover > tbody > tr:hover > td.menu-items-sticky-up,
.menu-items-table-wrap #menuItemsTable.table-hover > tbody > tr:hover > td.menu-items-sticky-down,
.menu-items-table-wrap #menuItemsTable.table-hover > tbody > tr:hover > td.menu-items-sticky-id,
.menu-items-table-wrap #menuItemsTable.table-hover > tbody > tr:hover > td.menu-items-sticky-naam {
    background: var(--bs-table-hover-bg);
}

/* COLLAPSED MODE */
#sidebar {
    width: 250px;
    min-width: 250px;
    /* Keep flex sizing explicit so layout remains stable when sticky */
    flex: 0 0 250px;
    transition: all 0.3s ease;
    /* Make sidebar stick to the top of the viewport while staying in normal flow */
    position: sticky;
    top: 0;
    align-self: start; /* ensure it sticks relative to viewport and not centered */
    height: 100vh; /* fill viewport height so long pages don't scroll the menu away */
    overflow: auto; /* allow internal scrolling for long menus */
    z-index: 1050; /* ensure sidebar above overlay */

    /* Hide scrollbar visuals while preserving scroll behavior */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

/* WebKit (Chrome, Safari) scrollbar hide */
#sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#sidebar.collapsed {
    width: 80px;
    min-width: 80px;
    flex: 0 0 80px;
}

/* Hide text when collapsed */
#sidebar.collapsed .menu-text {
    display: none;
}

/* Center icons */
#sidebar.collapsed .nav-link {
    text-align: center;
}

#sidebar.collapsed .nav-link i {
    font-size: 1.4rem;
    margin: 0;
}

/* Hide submenu arrows */
#sidebar.collapsed .submenu-arrow {
    display: none;
}

/* Adjust submenu padding */
#sidebar.collapsed .collapse .nav-link {
    padding-left: 0.5rem;
}

/* Consolidated toggle styles: single minimal block */
/* Keeps high specificity and small-screen fallback, avoids duplication. */
#sidebar > #toggleSidebar, #sidebar #toggleSidebar, #toggleSidebar {
    position: absolute;
    top: 8px;
    right: -8px; /* visual offset outside sidebar */
    width: 36px;
    height: 36px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* above overlays */
    pointer-events: auto;
    visibility: visible;
}

@media (max-width: 991px) {
    /* Hide the toggle button that sits inside the sidebar on small screens (we use the navbar toggle instead) */
    #sidebar #toggleSidebar {
        display: none !important;
    }

    /* Sidebar becomes off-canvas fixed, hidden by default */
    #sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        transform: translateX(-100%); /* hidden off-screen */
        transition: transform 0.22s ease-in-out, visibility 0.22s ease-in-out;
        z-index: 1060; /* above overlay */
        width: 260px; /* desired mobile width */
        min-width: 0;
        flex: 0 0 auto;
        pointer-events: none; /* prevent interactions when hidden */
        visibility: hidden;
    }
    /* When shown, slide in */
    #sidebar.show {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    /* Ensure main d-flex container doesn't reserve space for the sidebar while it's fixed */
    .d-flex > #sidebar {
        /* Don't force width:0 - that hides the fixed sidebar when it slides in. Keep flex-basis/min-width only. */
        flex-basis: 0 !important;
        min-width: 0 !important;
    }

    /* Ensure the main content (flex-grow-1) fills available width on mobile */
    .d-flex > .flex-grow-1 {
        width: 100% !important;
    }

    /* Keep the toggle button visible even when sidebar is hidden: we add a separate mobile toggle in navbar; ensure its z-index is high */
    #toggleSidebarMobile {
        z-index: 2001;
    }

    /* When overlay is visible, prevent body scroll */
    #overlay.show {
        display: block;
    }
}

/* Overlay (covers page when mobile sidebar is open) */
#overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.35);
    z-index: 1040; /* ensure overlay sits below sidebar but above main content */
}
#overlay.show {
    display: block;
}

/* Prevent background scroll when off-canvas sidebar is open */
.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

.nav-link.active {
    background-color: #0d6efd;
}

.submenu-arrow {
    transition: transform 0.3s ease;
}

.submenu-arrow.rotate {
    transform: rotate(180deg);
}

/* ICON HELPERS: normalize Font Awesome and Bootstrap Icons when used together */
.icon,
.bi,
.fas,
.far,
.fab,
.fa,
.fa-solid,
.fa-regular,
.fa-brands {
    display: inline-block;
    vertical-align: middle; /* align with text */
    line-height: 1; /* prevent unexpected extra height */
}

/* Size utilities */
.icon-sm { font-size: 0.85rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }

/* Fixed width helper (centers icons in UI elements like buttons or sidebar items) */
.icon-fw { width: 1.25em; text-align: center; display: inline-block; }

/* Ensure sidebar icons remain consistent when collapsed */
#sidebar .nav-link i,
#sidebar .nav-link .icon {
    font-size: 1.25rem;
}

/* Small helper for button/icon spacing */
.btn .icon,
.btn i {
    margin-right: 0.4rem;
}

/* User box / compact exit button behavior moved from sidebar include */
#sidebar .user-exit { display: none; }
#sidebar .user-box { display: block; }
#sidebar.collapsed .user-box { display: none; }
#sidebar.collapsed .user-exit { display: block; text-align: center; }
#sidebar .user-exit a { color: #212529; background-color: #f8f9fa; border-radius: 0.375rem; padding: 0.375rem 0.5rem; display: inline-block; }
#sidebar.collapsed .menu-keuze { display: none; }

/* Small-screen fallback for global-toggle kept consistent */
@media (max-width: 991px) {
    #sidebar .global-toggle { right: -8px; left: auto; }
}

/* Activities responsive grid */
.activities {
    display: grid;
    grid-template-columns: 1fr; /* single column on all sizes */
    gap: 0.75rem;
}

.activities .card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.activities .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* Keep card content readable when sidebar is narrow */
.activities .card .card-body {
    word-wrap: break-word;
}

/* Activity details panel: make it fill available vertical space and scroll internally */
/* On wide screens we want the split children to stretch so the vertical splitter is full-height. */
.activities-wrapper {
    align-items: stretch; /* allow splitter and panes to stretch full height in row layout */
}

#pageDetails {
    background: #fff;
    border-left: 1px solid rgba(0,0,0,0.05);
    height: calc(100vh - 140px); /* leaves space for header and margins; adjust if needed */
    min-width: 0;
    max-width: 100%;
    overflow: auto;
}

#pageDetails table {
    width: 100%;
}

/* Improve table readability inside details panel */
#pageDetails td, #pageDetails th {
    vertical-align: top;
}

#pageDetails > *,
#pageDetails #menu-items-fragment,
#pageDetails #menu-items-fragment form {
    min-width: 0;
    max-width: 100%;
}

/* On small screens stack details below activities (default Bootstrap behavior). Make details full width with smaller top padding */
@media (max-width: 767px) {
    #pageDetails {
        height: auto;
        border-left: none;
        margin-top: 1rem;
    }
}

/* Split layout for activities and details */
#activitySplit {
    gap: 0.75rem;
    /* make split area fill viewport height so splitter spans correctly */
    height: calc(100vh - 140px);
}

#pageLeft {
    min-width: 220px;
    max-width: 75%;
    width: 40%;
    overflow: auto;
    flex: 0 0 auto; /* respect explicit width set via JS */
}

#splitter {
    width: 12px;
    cursor: col-resize;
    background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06));
    border-left: 1px solid rgba(0,0,0,0.04);
    border-right: 1px solid rgba(0,0,0,0.04);
    align-self: stretch; /* ensure full height in the flex container */
    height: auto;
    z-index: 9999; /* bring above most elements so it's grab-able */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* ensure splitter receives mouse events */
}
#splitter:before {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
}

/* Make sure pageLeft and pageDetails don't overlap the splitter visually */
#pageLeft, #pageDetails { position: relative; }

/* while dragging, make it obvious and prevent text selection */
body.resizing {
    cursor: col-resize !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Ensure the split container is a stable flex container that fills the viewport minus header/footer.
   Use a CSS variable for header offset so it's easy to tweak; fall back to the previous 140px value. */
:root { --activities-header-offset: 140px; }

#activitySplit, .activities-wrapper {
    display: flex;              /* ensure flex behavior even if bootstrap classes change */
    flex-direction: row;        /* default row layout for desktop */
    align-items: stretch;       /* stretch children vertically */
    min-height: calc(100vh - var(--activities-header-offset));
}

/* Allow children to shrink properly and enable internal scrolling by setting min-height:0 */
#pageLeft, #pageDetails, #splitter {
    min-height: 0;
}

/* Right panel: take remaining horizontal space and fill vertically */
#pageDetails {
    flex: 1 1 auto;            /* grow to fill remaining width */
    height: auto;              /* allow flex to manage height */
    min-width: 0;
    max-width: 100%;
    overflow: auto;            /* scroll internally when content overflows */
}

/* Left panel: keep JS-controlled width but allow it to stretch vertically */
#pageLeft {
    flex: 0 0 auto;            /* keep explicit width set by JS/localStorage */
    overflow: auto;
}

/* Splitter: ensure it stretches the full height of the flex container */
#splitter {
    align-self: stretch;
    height: auto;
}

/* Small screens keep stacked layout behavior (existing rules continue to apply) */
@media (max-width: 767px) {
    #activitySplit { flex-direction: column; min-height: 0; }
    #pageLeft { width: 100%; max-width: none; }
    #splitter { display: none; }
    /* On small screens stacked layout should not force full-height panes */
    .activities-wrapper { align-items: start; }
    /* Hide the global (right-hand) details pane on small screens - we render inline under the item instead */
    #pageDetails { display: none; }
    /* Inline details inserted after a card */
    .pageDetailss-inline {
        margin: .75rem 0 1.25rem 0;
        padding: .75rem;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: .25rem;
        box-shadow: 0 6px 14px rgba(0,0,0,0.04);
    }
    .pageDetailss-inline .spinner-border { margin: .5rem 0; }
}

/* Make activity links more visible and accessible */
.activity-link {
    display: inline-block;
    position: relative; /* enable absolute-positioned tooltip */
    z-index: 99999 !important; /* ensure link sits above nearby elements */
    font-weight: 600; /* slightly bolder */
    color: inherit; /* keep status color set inline */
    text-decoration: none; /* we'll add highlight on hover */
    padding: 0 0 0 5rem; /* increase left padding so link text starts further to the right */
    border-radius: 0.25rem;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
    cursor: pointer;
    left: 0; /* remove nudge */
    vertical-align: baseline; /* align with paragraph text baseline */
    white-space: normal; /* allow wrapping like paragraphs */
}

/* Remove spacer styles if present */
.activity-link-spacer { display: none !important; }

/* Strong visibility overrides trimmed back to avoid interfering with alignment */
.activity-link,
.activity-link * {
    -webkit-text-fill-color: inherit !important;
    text-indent: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
/*    margin-left: 0 !important;   HJH*/
/*    margin-right: 0 !important;   HJH*/
    padding-left: 0 !important; /* ensure inner elements don't hide at left */
    padding-right: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;
    display: inline !important;
}
.activity-link {
    z-index: 99999 !important; /* sit above nearly everything */
    pointer-events: auto !important;
    background-clip: padding-box !important;
}

/* Tooltip (uses the data-tooltip attribute via attr(data-tooltip)) */
.activity-link[data-tooltip]::after {
    content: attr(data-tooltip);
    /* Use opacity/visibility instead of display to allow CSS transitions (fade) */
    position: absolute;
    left: calc(100% + 2rem); /* shift further right so tooltip doesn't overlap the link */
    top: 0.125rem; /* align vertically near the text baseline */
    background: rgba(17,17,17,0.92);
    color: #fff;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    white-space: normal; /* allow wrapping so the whole text is visible */
    border-radius: 0.35rem;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    z-index: 2300; /* put above most UI elements */
    max-width: 60vw; /* avoid overflowing the viewport */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.12s ease, visibility 0.18s linear;
}

.activity-link[data-tooltip]:hover::after,
.activity-link[data-tooltip]:focus::after,
.activity-link[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.activity-link:hover,
.activity-link:focus {
    background: rgba(13,110,253,0.09); /* updated to requested value */
    color: #0d6efd; /* primary color on hover */
    text-decoration: none;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.09);
}

/* Make link more prominent when hovering the whole card */
.card:hover .activity-link {
    transform: translateY(-1px);
    text-decoration: underline;
}

/* Keep accessibility: visible focus for keyboard users */
.activity-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(13,110,253,0.18);
}

/* Ensure card titles are on top and not clipped by adjacent elements */
.card-title, h5.card-title {
    position: relative;
    z-index: 100000; /* above other UI elements */
    padding-left: 0; /* align titles with paragraph text */
    overflow: visible;
}
/* Reset possible pseudo-elements on card-title that could hide characters */
.card-title::before, .card-title::after {
    content: none !important;
}

/* Make sure the title container doesn't clip the text */
.card-title, h5.card-title {
    overflow: visible;
}

@media (max-width: 767px) {
    /* On small screens keep the tooltip centered under the link (more natural for stacked layout) */
    .activity-link[data-tooltip]::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: calc(100% + 8px) !important;
        max-width: 90vw !important;
        /* ensure mobile tooltip transitions the same way */
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.12s ease;
    }
    /* Reset link padding on small screens so stacked layout remains natural */
    .activity-link { padding-left: 0 !important; }
}

/* Tooltip placement variants: allow JS to flip tooltip to left, top, or bottom when needed */
.activity-link.tooltip-right[data-tooltip]::after {
    /* default: already positioned to the right; ensure transform baseline */
    left: calc(100% + 2rem);
    right: auto;
    top: 0.125rem;
    transform: translateX(0);
}
.activity-link.tooltip-left[data-tooltip]::after {
    left: auto;
    right: calc(100% + 2rem);
    top: 0.125rem;
    transform: translateX(0);
}
.activity-link.tooltip-bottom[data-tooltip]::after {
    left: 50%;
    right: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%);
}
.activity-link.tooltip-top[data-tooltip]::after {
    left: 50%;
    right: auto;
    bottom: calc(100% + 8px);
    top: auto;
    transform: translateX(-50%);
}

/* Hidden measurement helper if JS wants to use a class-based measure (kept visually hidden) */
.activity-tooltip-measure {
    position: absolute !important;
    visibility: hidden !important;
    left: -9999px !important;
    top: -9999px !important;
    max-width: 60vw !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.82rem !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* Activity details toolbar */
.activity-toolbar {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end; /* align toolbar to the right of the details area */
    align-items: center;
}
.activity-toolbar .btn {
    font-size: 0.85rem;
    padding: 0.28rem 0.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.activity-toolbar .btn-danger {
    background-color: #dc3545;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.06);
}
.activity-toolbar .btn:hover {
    filter: brightness(0.96);
}
@media (max-width: 767px) {
    .activity-toolbar { justify-content: flex-start; margin-bottom: 0.5rem; }
}

/* Make Bootstrap Icon sizes slightly larger inside the toolbar for clarity */
.activity-toolbar .bi {
    font-size: 0.95rem; /* slightly larger than surrounding text */
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}
/* Make the delete (x) icon more prominent */
.activity-toolbar .activity-delete .bi.bi-x {
    font-size: 1.25rem; /* larger X icon */
    vertical-align: -0.08em; /* nudge visually to center with text */
}
.activity-toolbar .activity-edit .bi.bi-pen {
    font-size: 1.0rem; /* keep pen a bit larger but smaller than X */
}
.activity-toolbar .btn .bi { margin-right: 0.3rem; }
/* Toolbar-specific: activity-link used as icon-only buttons in toolbar should not inherit list padding */
.activity-toolbar .activity-link {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
/* Position toolbar tooltips centered below the icon (more natural for small icon-only buttons) */
.activity-toolbar .activity-link[data-tooltip]::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(100% + 8px) !important;
    max-width: 220px !important;
    white-space: nowrap !important;
}
/* Slightly increase touch target on mobile while keeping icon-only look */
@media (max-width: 767px) {
    .activity-toolbar .activity-link {
        padding: 0.25rem !important;
        border-radius: 0.375rem !important;
    }
}

/* Highlight selected activity card */
.card.selected {
    border: 2px solid rgba(13,110,253,0.45);
    box-shadow: 0 6px 18px rgba(13,110,253,0.06);
    background-color: rgba(13,110,253,0.04);
}
.card.selected .card-title .activity-link,
.card.selected .card-title {
    color: #0d6efd !important;
}
@media (max-width: 767px) {
    /* Selected inline behavior: keep subtle highlight so inline details remain prominent */
    .card.selected { border-width: 1px; background-color: rgba(13,110,253,0.03); }
}

/* Rooster (schedule) specific styles moved here from roosterTonen.inc.php */
/* Tooltip for elements with data-tooltip (used by #resetRoosterCols) */
a[data-tooltip]{position:relative;}
a[data-tooltip]::after, a[data-tooltip]::before{pointer-events:none; opacity:0; transition:opacity .12s ease-in-out;}
a[data-tooltip]::after{content:attr(data-tooltip); position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + .4rem); background:rgba(0,0,0,.85); color:#fff; padding:.35rem .5rem; border-radius:.25rem; white-space:nowrap; font-size:.82rem; line-height:1; z-index:1200;}
a[data-tooltip]::before{content:''; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% + .18rem); border:6px solid transparent; border-top-color:rgba(0,0,0,.85); z-index:1200;}
a[data-tooltip]:hover::after, a[data-tooltip]:hover::before, a[data-tooltip]:focus::after, a[data-tooltip]:focus::before{opacity:1;} 

/* UX improvements for rooster table: zebra striping, hover highlight, sticky header and first column */
#roosterTable tbody tr:nth-child(even) td { background: #fbfbfb; }
#roosterTable tbody tr:hover td,
#roosterTable tbody tr:focus-within td,
#roosterTable tbody tr.row-selected td { background: #fff3c6; transition: background 120ms ease-in-out; }

/* Make hover highlight apply to all cells in the hovered row, including sticky columns and header-like first row. */
#roosterTable tbody tr:hover td,
#roosterTable tbody tr:hover th,
#roosterTable tbody tr.row-selected td,
#roosterTable tbody tr.row-selected th {
  background: #fff3c6 !important; /* light yellow */
  color: inherit !important;
}

/* Also ensure sticky first column and actions column don't hide the hover background; allow them to inherit on hover */
#roosterTable th:first-child:hover, #roosterTable td:first-child:hover,
#roosterTable td.rooster-actions-col:hover, #roosterTable th.rooster-actions-col:hover {
  background: #fff3c6 !important;
}

/* Sticky header (if you have a THEAD) and ensure it sits above other cells */
#roosterTable thead th, #roosterTable thead td { position: sticky; top: 0; z-index: 50; background: #fff; }

/* Sticky first column so identification stays visible on horizontal scroll */
#roosterTable th:first-child, #roosterTable td:first-child { position: sticky; left: 0; z-index: 40; background: #fff; border-right: 1px solid rgba(0,0,0,0.06); }
#roosterTable td:first-child { font-weight:600; }

/* Selected-row visible outline for keyboard users */
.row-selected { outline: 2px solid rgba(255,193,7,0.35); }

/* Small helper to avoid sticky column overlapping when table is within containers with padding */
.table-responsive #roosterTable th:first-child, .table-responsive #roosterTable td:first-child { box-shadow: 2px 0 0 rgba(0,0,0,0.02); }

/* When the roster wrapper should allow vertical scrolling (rooster-scrollable), keep a max-height
   so the table body scrolls inside the wrapper and the thead sticks to the wrapper top. */
.rooster-scrollable {
    position: relative;            /* ensure scrollbars are part of this element's box and z-index works */
    box-sizing: border-box;        /* include scrollbar/padding in width calculations */
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 60vh !important;
    max-width: 100%; /* of een vaste waarde zoals 800px */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* Ensure scrollbars are visible when needed (cross-browser) so users notice scrolling is possible */
    scrollbar-width: auto; /* Firefox */
    -ms-overflow-style: auto; /* IE 10+ */

    /* Reserve space for scrollbars so they don't overlay and become unclickable */
    scrollbar-gutter: stable both-edges;

    /* Reserve some bottom padding so a horizontal scrollbar doesn't overlap the last row's content */
    padding-bottom: 12px;
}

.rooster-scrollable table {
    min-width: 1200px; /* pas aan aan aantal kolommen */
    width: max-content;
    border-collapse: collapse;
}

/* WebKit scrollbar styling to make scrollbars visible and usable */
.rooster-scrollable::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
.rooster-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 6px;
}
.rooster-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

/* Bootstrap fix */
.col {
  min-width: 0;
}

.rooster-responsive {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.rooster-responsive table {
  width: max-content !important;
  display: inline-table;
}



/* Stronger, scoped sticky rules for the roster table inside the scrollable wrapper */
.rooster-scrollable thead th, .rooster-scrollable thead td,
.rooster-responsive thead th, .rooster-responsive thead td {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #fff !important;
}

/* Ensure the intersection cell (thead first-child) is above both header row and first column */
.rooster-scrollable thead th:first-child, .rooster-scrollable thead td:first-child,
.rooster-responsive thead th:first-child, .rooster-responsive thead td:first-child {
    left: 0 !important;
    position: sticky !important;
    z-index: 70 !important;
    background: #fff !important;
}

/* Replace generic last-child sticky rule with a scoped rule for the actions column.
   Targeting the explicit class avoids conflicts with other tables and ensures the
   header cell gets both top:0 and right:0 so it remains visible and stacked above
   other sticky headers/columns. */

/* Previously there was a generic rule: td:last-child, th:last-child { position: sticky; right:0; ... }
   That rule was overly broad and could conflict with thead/first-column stacking. We scope to #roosterTable
   and the dedicated .rooster-actions-col class that the PHP include emits for the actions column. */

#roosterTable td.rooster-actions-col,
#roosterTable th.rooster-actions-col {
  position: sticky; /* keep column fixed horizontally */
  right: 0;         /* stick to the right edge of the scroll container */
  background: var(--rooster-actions-bg, #fff);
  box-shadow: -6px 0 8px -6px rgba(0,0,0,0.12);
  z-index: 95;      /* above normal cells but below header intersection if needed */
  min-width: 160px;
  width: 160px;
  scroll-snap-align: start;
}

/* Ensure the header cell for the actions column also sticks to the top of the table
   (when THEAD is present). Use a slightly higher z-index so the header sits above
   the column body cells and other sticky header rows. */
.rooster-scrollable thead th.rooster-actions-col,
#roosterTable thead th.rooster-actions-col {
  position: sticky !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 120 !important; /* ensure header is on top */
  background: var(--rooster-actions-bg, #fff) !important;
}

/* NOTE: removed the fallback that treated the first TBODY row as a header. The server now emits a real <thead>,
   and the JS marks tables with .rooster-has-thead when needed. Keeping the fallback caused the first data row to
   be displayed as a table-header-group and overlap other rows in some browsers. */

/* Ensure roster table cells and headers have a sensible minimum width to avoid overly narrow columns
   but exclude the invisible spacer cell so it can be very narrow. */
#roosterTable td:not(.rooster-spacer), #roosterTable th:not(.rooster-spacer) {
  min-width: 100px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Invisible spacer cell: keep very small by default; JS will expand only when needed */
#roosterTable td.rooster-spacer {
  min-width: 6px !important;
  max-width: 6px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Right-side spacer div used to reserve scroll space */
.rooster-right-spacer {
  display: inline-block;
  width: 6px;
  min-width: 6px;
  height: 1px;
  pointer-events: none;
}

/* Make sure the webkit scrollbar is visible and usable for the roster container */
.rooster-scrollable::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
.rooster-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.22);
    border-radius: 6px;
}
.rooster-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

/* If you prefer the horizontal scrollbar always visible even when not needed, change `auto` above to `scroll` */

/* Restore safe defaults for the rooster table: keep the table and cells with normal backgrounds
   so header and row text remain visible. Remove previous aggressive "transparent" overrides
   and complex z-index stacking that caused headers/rows to disappear in some markups. */

/* Wrapper background: keep neutral (white) so content is legible */
.table-responsive, .rooster-scrollable, .rooster-responsive, .table-responsive.rooster-responsive {
    background-color: #ffffff !important;
}

/* Keep the table background default (no forcing to transparent) so TD/TH show correctly */
#roosterTable, .rooster-scrollable #roosterTable, .table-responsive > #roosterTable {
    background-color: transparent; /* allow cells to control their own background */
    overflow-x: auto;
}

/* Ensure tbody cells keep their zebra/hover colors (do not force transparent) */
#roosterTable tbody td, #roosterTable tbody th {
    /* Let per-row zebra and hover rules control appearance */
}

/* Restore hover behavior for the roster table: highlight the whole row */
#roosterTable tbody tr:hover td,
#roosterTable tbody tr:focus-within td,
#roosterTable tbody tr.row-selected td { background: #fff3c6; transition: background 120ms ease-in-out; }

/* Minimal, well-known sticky rules—avoid huge z-index values that create stacking issues */
#roosterTable thead th, #roosterTable thead td {
    position: sticky;
    top: 0;
    z-index: 60; /* header above body */
    background: #fff;
}
/* Intersection (first header cell) should sit above the header row to avoid overlap */
#roosterTable thead th:first-child, #roosterTable thead td:first-child {
    left: 0;
    z-index: 80;
    position: sticky;
    background: #fff;
}
/* Sticky first column (body) */
#roosterTable th:first-child, #roosterTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 50;
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.06);
}
/* Actions column */
#roosterTable td.rooster-actions-col, #roosterTable th.rooster-actions-col {
    position: sticky;
    right: 0;
    z-index: 70;
    background: var(--rooster-actions-bg, #fff);
}

/* Keep the small invisible spacer narrow and non-intrusive */
#roosterTable td.rooster-spacer { min-width: 6px !important; width: 6px !important; background: transparent !important; }

/* Remove earlier scoped overrides that lowered interactive elements' z-index inside the table */
#roosterTable .activity-link,
#roosterTable .activity-link *,
#roosterTable .card-title,
#roosterTable .card-title * {
  /* no-op: keep original stacking so tooltips/actions behave as before */
}
#roosterTable a[data-tooltip]::after,
#roosterTable a[data-tooltip]::before {
  z-index: 1200 !important; /* tooltips remain above most UI but below global overlays */
}

/* --- medewerkers split layout: mirror activity split behavior --- */
#pageDetails {
    background: #fff;
    border-left: 1px solid rgba(0,0,0,0.05);
    height: calc(100vh - 140px);
    overflow: auto;
}

#pageDetails table {
    width: 100%;
}

#pageDetails td, #pageDetails th {
    vertical-align: top;
}

@media (max-width: 767px) {
    #pageDetails {
        height: auto;
        border-left: none;
        margin-top: 1rem;
        display: none; /* stack: hide right pane on small screens */
    }
}

#activitySplit, .activities-wrapper {
    gap: 0.75rem;
    height: calc(100vh - 140px);
}

#pageLeft {
    min-width: 220px;
    max-width: 75%;
    width: 40%;
    overflow: auto;
    flex: 0 0 auto;
}

#pageSplitter {
    width: 12px;
    cursor: col-resize;
    background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06));
    border-left: 1px solid rgba(0,0,0,0.04);
    border-right: 1px solid rgba(0,0,0,0.04);
    align-self: stretch;
    height: auto;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
#pageSplitter:before {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
}

#pageLeft, #pageDetails { position: relative; }

body.resizing { cursor: col-resize !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }

:root { --activity-header-offset: 140px; }

#activitySplit, .activities-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - var(--activity-header-offset));
}

#pageLeft, #pageDetails, #pageSplitter { min-height: 0; }

#pageDetails {
    flex: 1 1 auto;
    height: auto;
    min-width: 220px;
    overflow: auto;
}

#pageLeft {
    flex: 0 0 auto;
    overflow: auto;
}

#pageSplitter {
    align-self: stretch;
    height: auto;
}

@media (max-width: 767px) {
    #activitySplit { flex-direction: column; min-height: 0; }
    #pageLeft { width: 100%; max-width: none; }
    #pageSplitter { display: none; }
    .activities-wrapper { align-items: start; }
}

.fragment-link2,
.black2 {
    display: inline;
}