/* /Views/Components/MenuComponents/MainMenuComponent/MainMenuComponent.razor.rz.scp.css */
/*
    !IMPORTANT:
    Due to the nature of blazor and telerik code generation, CSS isolation is not working correctly when combining these components.
    Therefore the best practice we state that CSS classes from standard HTML tags are to be isolated as defined by Blazor.
    When using Telerik components which require custom CSS or some changes we state that these CSS classes are to be defined in global CSS files.

    This should work in alle situations however keep in mind, when using global CSS classes be wary of conflicts with existing CSS tags.

    For more info see: https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
*/

.menuRow[b-x35xclrim8] {
    background-color: skyblue;
}

.header-logo-ot[b-x35xclrim8] {
    background-color: lightblue;
}

.header-logo-at[b-x35xclrim8] {
    background-color: lightgray;
}


.mainMenuItem[b-x35xclrim8] {
    color: black;
    vertical-align: central;
}
/* /Views/Components/MenuComponents/MeldingenComponent/MeldingenComponent.razor.rz.scp.css */
/*
    !IMPORTANT:
    Due to the nature of blazor and telerik code generation, CSS isolation is not working correctly when combining these components.
    Therefore the best practice we state that CSS classes from standard HTML tags are to be isolated as defined by Blazor.
    When using Telerik components which require custom CSS or some changes we state that these CSS classes are to be defined in global CSS files.

    This should work in alle situations however keep in mind, when using global CSS classes be wary of conflicts with existing CSS tags.

    For more info see: https://docs.telerik.com/blazor-ui/knowledge-base/common-css-isolation
*/

/*vertial - first example*/
.stack-vertical[b-cf15mj51ot] {
    /*direction*/
    display: flex;
    flex-direction: column;
    /*color, alignment*/
    background-color: white;
    color: black;
    align-items: flex-start;
    border-style: none;
}

.listview-item[b-cf15mj51ot] {
    border-style: none;
    padding: 3%;
}

/* /Views/Components/TableComponents/TableColumnsRTComponent.razor.rz.scp.css */


.cell-wrapper[b-1t0s6ympwl] {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.text-ellipsis[b-1t0s6ympwl] {
    flex: 1; /* takes remaining space */
    min-width: 0; /* REQUIRED for ellipsis to work in flex */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.icon-right[b-1t0s6ympwl] {
    flex: 0 0 auto; /* never shrink */
    margin-left: 6px;
    cursor: pointer;
}



.cell_input_background_class[b-1t0s6ympwl] {
    background-color: inherit;
    font-size: 9pt;
}

.header-buttons[b-1t0s6ympwl] {
    width: 20px;
    height: 20px;
    padding: 0px !important;
}

.margin-top[b-1t0s6ympwl] {
    margin-top: 2px;
}
/* /Views/Components/TableComponents/TablePSLColsButtonComponent.razor.rz.scp.css */
.small-button[b-h2by2kbwrz],
[b-h2by2kbwrz] .small-button {
    height: 16px !important;
    width: 16px !important;
}

/* /Views/Components/TableComponents/TablePSLExecGroupComponent.razor.rz.scp.css */
.small-button[b-cgp95gkp7t],
[b-cgp95gkp7t] .small-button {
    height: 16px !important;
    width: 16px !important;
}

/* /Views/Pages/Entrance/Entrance.razor.rz.scp.css */



[b-w2h1ytzsng] .customWidth {
    width: 100%;
}


    /* ===== ROOT LAYOUT ===== */
    .layout[b-w2h1ytzsng] {
        display: flex;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }
    /* ===== LEFT IMAGE ===== */

    .main-image[b-w2h1ytzsng] {
        flex: 3; /* takes 3 parts */
        min-width: 0; /* ✅ prevents compression issues */
    }


        .main-image img[b-w2h1ytzsng] {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    /* ===== SIDEBAR ===== */
    .sidebar[b-w2h1ytzsng] {
        flex: 1; /* takes 1 part */
        max-width: 320px; /* never bigger than design */
        min-width: 260px; /* prevent too small */

        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;
    }
    /* ===== PANELS ===== */
    .panel[b-w2h1ytzsng] {
        background: #f5f5f5;
        border-radius: 4px;
        display: flex;
    }
    /* ===== TOP PANEL (CRITICAL FIX) ===== */
    /* ===== TOP PANEL ===== */
    /* panel must constrain height */
    /* ===== PANEL CONSTRAINT ===== */
    /* STEP 1: constrain panel */
    /* constrain panel */

    .panel-top[b-w2h1ytzsng] {
        flex: 1;
        min-height: 0;
        display: flex;
        overflow-y: auto; /* ✅ enables vertical scroll */
    }
    /* Ensure Telerik layout doesn't grow infinitely */
    .tile-container[b-w2h1ytzsng] {
        height: 100%;
        overflow-y: auto; /* ✅ scrollbar inside */
    }
    /* ===== MIDDLE PANEL ===== */
    .panel-middle[b-w2h1ytzsng] {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
    }
    /* ===== BOTTOM PANEL ===== */
    .panel-bottom[b-w2h1ytzsng] {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px;
    }
        /* logos */
        .panel-bottom img[b-w2h1ytzsng] {
            max-width: 100%;
            height: auto;
        }
    /* ===== MOBILE ===== */


    @media (max-width: 768px) {

        .layout[b-w2h1ytzsng] {
            flex-direction: column;
        }

        .sidebar[b-w2h1ytzsng] {
            width: 100%;
            height: auto;
        }

        .panel-top[b-w2h1ytzsng] {
            height: 300px; /* fixed height for mobile */
        }
    }
/* /Views/Pages/TablePage/TablePage.razor.rz.scp.css */

.side-bar-open[b-gv3sr7ftst] {
    width: 400px;
    max-width: 400px;
}

.side-bar-closed[b-gv3sr7ftst] {
    width: 0;
    max-width: 0;
    z-index: 0;
}

.stack-horizontal[b-gv3sr7ftst] {
    /*direction*/
    display: flex;
    flex-direction: row;
    /*color, alignment*/
    background-color: white;
    color: black;
    align-items: flex-start;
}

.stack-vertical[b-gv3sr7ftst] {
    /*direction*/
    display: flex;
    flex-direction: column;
    /*color, alignment*/
    background-color: white;
    color: black;
    align-items: flex-start;
}