:root {
    --navbar-height: 75px;
}

/* layout root */
body.layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* scope EVERYTHING to your view */
.my-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    /* ONLY target container inside your view */
    .my-view > .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* app layout */
    .my-view .app {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* top bars */
    .my-view .top {
        flex: 0 0 auto;
    }

.my-view {
    height: 40px;
}

    .my-view .green {
        /*height: 80px;*/
        border: 2px solid green;
        padding: 5px 5px 5px 5px;
        margin-bottom: .5rem;
    }

    .my-view .blue {
        height: 50px;
        border: 2px solid gray;
        margin-bottom: .5rem;
    }

    /* main area */
    .my-view .main {
        flex: 1;
        display: flex;
        overflow: hidden;
        background: #eef8de;
        min-height: 0;
        border: 2px solid purple;
        margin-bottom: 45px;
    }

    /* center content */
    .my-view .center-content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        min-height: 0;
    }

        .my-view .center-content > .row {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            min-height: 0;
        }

            .my-view .center-content > .row > [class*="col-"] {
                display: flex;
                flex-direction: column;
                min-height: 0;
                flex: 1 1 0;
            }


    /* scroll box */
    .my-view .scroll-area {
        width: 100%;
        flex: 1; /* CRITICAL CHANGE */
        overflow-y: auto;
        background: #eef8de;
        padding:5px 20px;
        box-sizing: border-box;
        min-height: 0; /* ALSO IMPORTANT */
        padding-right: 10px;
    }

/* Grid Table Layout */
/* Hover highlight for rows */
.grid-row:hover {
    background-color: #e9f3ff; /* soft blue */
    cursor: pointer;
}

/* Optional: highlight selected row */
.grid-row.selected {
    background-color: #c7e0ff !important;
    border-left: 4px solid #0078d4;
}

/* Optional: highlight selected row */
.grid-row.selectedall {
    background-color: #c7e0ff !important;
}

.grid-table {
    display: grid;
    /* KEEP THIS */
    grid-template-columns: 110px 230px 100px 100px 130px 90px;
    /* KEEP THESE TOO */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    gap: 6px;
    padding: 0;
}

.left-col,
.painworking-body,
.painworking-wrapper,
.center-content,
.row,
[class*="col-"] {
    min-height: 0 !important;
}

.grid-header {
    position: sticky;
    top: 0;
    background: #f2f2f2;
    z-index: 5;
    padding: 6px 4px;
    border-bottom: 1px solid #ccc;
    max-height: 80px;
}

.grid-row {
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 4px;
}

.scroll-area {
    width: 100%;
}

/* MOBILE (let Bootstrap work) */
@media (max-width: 767.98px) {
    .my-view .center-content > .row > [class*="col-"] {
        flex: 0 0 auto; /* ← critical */
        width: 100%;
        max-width: 100%;
    }
}

/* DESKTOP (your scroll layout) */
@media (min-width: 768px) {
    .my-view .center-content > .row {
        flex-wrap: nowrap;
    }

        .my-view .center-content > .row > [class*="col-"] {
            flex: 1 1 0;
        }
}