﻿.e-gridheader, .e-gridcontent {
    border: 1px solid var(--secondary-color) !important;
}

.e-gridcontent {
    border-top: none !important;
}

.e-gridcontent {
   border-radius: 0 0 12px 0;
}

.e-grid input[type=checkbox] + span.e-check, input[type=checkbox] + span.e-check, .e-grid input[type=checkbox]:focus + span.e-check, .e-grid input[type=checkbox] + span.e-check:hover {
    background-color: var(--secondary-color) !important;
}

.e-toolbar div.e-toolbar-item:hover {
    background-color: transparent !important;
}

form .e-rowcell, form .e-headercell {
    border: none !important;
    border-bottom: none !important;
    border-right: 1px var(--secondary-color) solid !important;
}

form .e-rowcell:last-child, form .e-headercell:last-child {
    border: none !important;
}

.content .e-grid .e-rowcell,
.content .e-grid .e-headercell {
    border: none !important;
}

.e-toolbar .e-input-group:has(input[type="search"]) {
    border-radius: 0 8px 8px 0 !important;
}

.content .e-grid .e-rowcell {
    border-bottom: 1px dashed #DBDEFF !important;
}

/* Removes border around the whole grid */
.e-grid {
    border: none !important;
}

/* Removes toolbar border */
.e-grid .e-gridtoolbar {
    border: none !important;
}

/* Remove divider lines between toolbar buttons */
.e-grid .e-toolbar .e-toolbar-item {
    border: none !important;
}

/* Remove the whole grid outline */
.e-grid .e-toolbar {
    border-top: none !important;
}

.e-rhandler.e-rcursor {
    background-color: var(--secondary-color);
    width: 2px !important;
    height: 80% !important;
    top: calc((30px - 80%) / 2) !important;
}

.e-grid .e-gridcontent, .e-gridcontent .e-table, .e-gridcontent .e-content, .e-gridcontent, .e-headercell,
.e-grid .e-gridheader, .e-grid .e-table, .e-grid .e-headercell {
    background-color: transparent;
}

.e-grid .e-toolbar, .e-grid .e-toolbar-items, .e-toolbar-items, .e-toolbar-item {
    background-color: transparent;
}

/* ================================
   Scrollbar base
   ================================ */
.e-grid .e-content::-webkit-scrollbar {
    width: 12px; /* vertical */
    height: 12px; /* horizontal */
}

/* ================================
   Track
   ================================ */
.e-grid .e-content::-webkit-scrollbar-track {
    background: #DBDEFF;
}

/* ================================
   Thumb
   ================================ */
.e-grid .e-content::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color); /* main thumb color */
    border-radius: 6px;
    border: 2px solid #DBDEFF; /* blend with track */
}

.e-grid .e-content::-webkit-scrollbar-thumb:hover {
    background-color: #005a9e; /* darker on hover */
}

.e-grid .e-content::-webkit-scrollbar-thumb:active {
    background-color: #004578; /* even darker when pressed */
}

/* Vertical scroll buttons */
.e-grid .e-content::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-color: #DBDEFF;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,8 4,0 8,8' fill='%234F3A8C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.e-grid .e-content::-webkit-scrollbar-button:single-button:vertical:increment {
    background-color: #DBDEFF;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 4,8 8,0' fill='%234F3A8C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.list-content + .list-footer {
    background-color: var(--primary-color);
    border-radius: 0 0 10px 0;
}

.e-grid tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid td.e-active {
    background-color: var(--primary-color) !important;
}

.e-grid, .e-grid .e-rowcell, .e-headercell, .e-headertext {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: var(--text-color) !important;
}

.disabled-row {
    background-color: var(--quaternary-color) !important;
}

form .e-gridheader {
    border-radius: 0 12px 0 0 !important;
    background-color: var(--primary-color) !important;
}

body:has(.dark-mode) form .e-headercell, body:has(.dark-mode) form .e-headercell * {
    background-color: #422F78 !important;
}

@media only screen and (max-width: 576px) {
    .e-gridheader {
        display: none;
    }

    .e-grid .e-control.e-toolbar.e-spacer-toolbar {
        height: auto !important; /* allow it to grow */
        min-height: 80px; /* keep default row height */
        align-items: flex-start !important; /* support multiple rows */
    }

    .e-grid .e-toolbar .e-hscroll-bar {
        overflow: visible !important;
        height: auto !important;
    }

    .e-grid .e-toolbar .e-hscroll-content {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
        height: auto !important;
    }

    .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav, .e-hscroll_1_nav.e-scroll-nav.e-scroll-right-nav.e-lib.e-touch, div[role=button],
    .e-hscroll .e-scroll-nav.e-scroll-left-nav {
        display: none !important;
    }

    .e-hscroll-content:first-child, .e-toolbar-item.e-spacer {
        display: none;
    }

    .e-hscroll-content .e-toolbar-item:has(.e-searchinput), .e-hscroll-content .e-toolbar-item div:has(.e-searchinput) {
        width: 100% !important;
    }

    .e-hscroll:not(.e-scroll-device) {
        padding: 0 8px;
    }

    .e-gridcontent {
        border: none !important;
        border-top: 1px solid var(--secondary-color) !important;
    }

    .e-hscroll-content span:has(.e-searchinput) {
        border: none !important;
    }

    span:has(.e-searchinput)::after, .e-searchinput::after, span:has(.e-searchinput)::before {
        content: "|" !important;
    }

    .e-hscroll-content div:has(span .e-searchinput) {
        border-bottom: 1px var(--secondary-color) solid !important;
        border-radius: 0 !important;
    }

    .e-hscroll.e-scroll-device {
        padding: 0;
    }
}