body.todo-no-page-scroll {
    overflow: hidden !important;
}

.todo-page-wrap {
    height: var(--todo-page-height, calc(100vh - 240px));
    display: flex;
    flex-direction: column;
    min-height: 240px;
}

.todo-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
}

.todo-grid-wrap .todo-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Override shared clickable-grid styling: keep hover row highlight, but don't turn text blue/underlined. */
.todo-grid.clickable-grid tbody tr:hover > td,
.todo-grid.clickable-grid tbody tr:hover > td * {
    color: inherit !important;
    text-decoration: none !important;
}

/* Ensure the LOG CALL button keeps Bootstrap's intended colors even when the row-hover rule above applies. */
/* When hovering the row (but not the button), keep the LOG CALL button readable (white text). */
.todo-grid.clickable-grid tbody tr:hover > td .btn-outline-danger,
.todo-grid.clickable-grid tbody tr:hover > td .btn-outline-danger * {
    background-color: var(--bs-danger, #dc3545) !important;
    border-color: var(--bs-danger, #dc3545) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Make it obvious the button itself is clickable. */
.todo-grid .btn,
.todo-grid .btn * {
    cursor: pointer;
}