/*     LAYOUT */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*     Precies op de scherm lengte passen, scrollbar voor y overflow */
.fit-screen {
    height: calc(100vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
}

.fit-fulscreen {
    height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
}
/*     Modal content >30vh scrollbar */
.fit-modal {
    height: calc(85vh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
}

.fit-smallmodal {
    height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/*     Modal content >70vh scrollbar */
.fit-bigmodal {
    height: calc(64vh);
    overflow-y: auto;
    overflow-x: hidden;
}

.splitter-container {
    height: 100vh; /* Ensure it takes full height */
    overflow: visible; /* Allow content to expand */
}

/*      Een lichte tint, net wat lichter dan Blazorise.light maar donker genoeg voor onderscheid met wit */
.webcms-light {
    background-color: #f6f6f6;
}

/*      Een grotere modal width dan ModalSize.Large biedt */
@media (min-width: 576px) {
    .big-modal .modal-dialog {
        max-width: 1700px !important;
    }
}

/*      Een extra grotere modal width dan ModalSize.Large biedt */
@media (min-width: 576px) {
    .giant-modal .modal-dialog {
        max-width: 98vw !important;
        min-width: 98vw !important;
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1700px !important;
    }
}

/*     DATAGRIDS */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*     Groene omlijning selectie rijen in datagrids */
/*.table-primary th, .table-primary td, .table-primary thead td, .table-primary tbody + tbody {
    border-color: #87DDC5 !important;
}*/

/*     Groene selectie rijen in datagrids */
/*Card .table-primary, .table-primary > th, .table-primary > td {
    background-color: #d1e7dd !important;
}*/

/*      Fix voor de blazorise selectielogica rondom tabellen met zebrastripes*/
/*.table-primary {
    --bs-table-striped-bg: #d1e7dd !important;
}*/

.splitter-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it fills the modal body */
}

.modal-fullscreen {
    width: 90vw;
    height: 92vh;
    max-width: none;
    max-height: none;
}

.flex-container {
    display: flex;
    flex-direction: column;
    height: 77vh;
}

.flex-item {
    flex: 1; 
    min-height: 0; 
    overflow-y: auto;
    overflow-x: hidden;
}

/*     GRAPH */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*     Graph node links transparant maar zichtbaar  */
.links line {
    stroke: #999;
    stroke-opacity: 0.6;
}

/*     Hover pointer nodes */
.gnode:hover {
    cursor: pointer;
}

/*     TREEVIEW */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*     TreeNodes selectiekleur */
.b-tree-view-node-title .bg-primary {
    background-color: white !important;
}

/*     BUTTONS */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*      Spinner verder weg van de Button content */
.spinner-border {
    margin-right: 5px;
}

/*      Lichte buttons */
.btn-default {
    background-color: white;
    border-color: #ddd;
    color: #444;
}

/*      Lichte buttons hover effect */
.btn-default:hover, .btn-default:active, .btn-default.hover {
    background-color: #e9ecef;
    color: #2b2b2b;
}

/*      Contextmenu (rechtermuisknopmenu) opties */
.btn-context:hover {
    background-color: #08946c;
    color:white;
}

/*     ZOEKBALKEN */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*      Autocomplete omlijning */
.custom-autocomplete {
    box-sizing: border-box;
    border-radius: .25rem !important;
    border: 1px solid #ced4da !important;
}

.keyvalue-autocomplete {
    flex-grow: 1;
    min-width: 0; /* Prevent content overflow issues */
}

/*     NAVIGATIE */
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*      Tabs textkleur (niet-geselecteerd) */
.nav.nav-tabs .nav-item a.nav-link:not(.active) {
    color: #08946c !important;
}

/*     Tab groene omlijning (geselecteerd) */
.customtab .nav-link.active.show {
    background-color: white !important;
    border-bottom-color: #08946c !important;
    border-bottom-width: 2px;
    border-top: none;
    border-inline: none;
    color: #08946c;
}

/*      Navigatiedropdown achtergrondkleur (geselecteerd) */
.dropdown-item.active, .dropdown-item:active {
    background-color: #08946c !important;
}

/*      TEST */
.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%; /* Ensure it fills the column width */
    display: block; /* Block display ensures the element respects container size */
}

.data-grid-column {
    min-width: 100px; /* Set a reasonable minimum to allow shrinking */
    flex: 1 1 auto; /* Allows the column to resize */
}

.b-layout-header .navbar-light .navbar-nav .nav-link.active {
    color: white;
    background-color: #084444;
    border-radius: 10px;
}

.b-layout-header .navbar-light .navbar-nav .nav-link {
    color: white;
}