.e-grid,
.e-toolbar,
.e-button,
.e-input-group,
.e-popup {
    font-family: 'Segoe UI' !important;
}

.e-toolbar {
    width: 100% !important;
    float: left
}

.e-gridheader {
    width: 100%
}

.e-south-east {
    bottom: 2px !important
}

.e-dlg-container {
    z-index: 10000001;
}

.e-groupcaptionrow {
    cursor: pointer
}

.e-dlg-overlay {
    z-index: 100 !important;
}

.e-dialog {
    z-index: 101 !important;
}

.e-dlg-container {
    z-index: 101 !important;
}

.e-dialog .e-dlg-content {
    padding: 0px !important;
}

.e-alert-dialog .e-dlg-content {
    padding: 15px !important;
}

.e-confirm-dialog .e-dlg-content {
    padding: 15px !important;
}

.e-dropdownbase,
.e-ddl.e-popup,
.e-multiselect .e-popup {
    min-width: 200px !important;
}

.e-colorpicker-wrapper {
    width: 100%;
}

    .e-colorpicker-wrapper .e-split-btn-wrapper {
        width: 100%;
    }

        .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker {
            width: 100%;
        }

            .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker .e-selected-color {
                width: 100% !important;
            }

/* 1. Nền tổng thể và các ô Input phía trên */
[data-theme='dark'] .e-input-group,
[data-theme='dark'] .e-control-wrapper.e-input-group,
[data-theme='dark'] .e-dropdownlist,
[data-theme='dark'] .e-multiselect {
    background-color: var(--main-color) !important; /* Dùng màu xám đậm của bạn */
    border-color: var(--tranfer-color) !important;
}

    [data-theme='dark'] .e-input,
    [data-theme='dark'] .e-input-group input {
        color: var(--main-font-color) !important;
        background-color: transparent !important;
    }

/* 2. Phần Toolbar (Dòng chứa nút Thêm, Xóa, Duyệt...) */
[data-theme='dark'] .e-toolbar,
[data-theme='dark'] .e-toolbar-items {
    background-color: #3d3d3d !important; /* Làm sáng hơn nền body một chút để tách biệt */
}

[data-theme='dark'] .e-tbar-btn,
[data-theme='dark'] .e-tbar-btn-text {
    color: var(--main-font-color) !important;
}

/* 3. Nội dung Grid (Các dòng 17, 18, 19 trong ảnh) */
[data-theme='dark'] .e-grid .e-row {
    background-color: var(--bg-body) !important;
}

[data-theme='dark'] .e-grid .e-rowcell {
    color: var(--main-font-color) !important;
    border-color: var(--main-color) !important;
}

/* 4. Hiệu ứng Hover khi rê chuột vào dòng */
[data-theme='dark'] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--tranfer-color) !important;
}

/* 5. Header của Grid (ID, File, Status...) */
[data-theme='dark'] .e-grid .e-headercell {
    background-color: #252525 !important;
    color: var(--lever2-color) !important; /* Dùng màu xanh sáng của bạn cho tiêu đề */
}

/* 6. Checkbox bên trái */
[data-theme='dark'] .e-checkbox-wrapper .e-frame {
    background-color: var(--main-color) !important;
    border-color: var(--lever2-color) !important;
}
/* 4. Tinh chỉnh các nút trên Toolbar */
[data-theme='dark'] .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    background-color: transparent !important;
    color: var(--main-font-color) !important;
}

    /* Hiệu ứng khi di chuột qua nút (Hover) */
    [data-theme='dark'] .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover {
        background-color: var(--tranfer-color) !important; /* Dùng màu transfer của bạn */
        border-radius: 4px;
    }

    /* Màu icon trên toolbar */
    [data-theme='dark'] .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-icons {
        color: var(--lever2-color) !important; /* Icon dùng màu xanh sáng cho nổi bật */
    }

/* Trạng thái nút đang được chọn hoặc đang active */
[data-theme='dark'] .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay {
    background-color: var(--bg-body) !important;
    opacity: 0.5;
}
/* 5. Ép màu cho Syncfusion Gantt Chart */
[data-theme='dark'] .e-gantt {
    background-color: var(--bg-body) !important;
    color: var(--main-font-color) !important;
}

    /* Màu cho phần Grid bên trái của Gantt */
    [data-theme='dark'] .e-gantt .e-treegrid,
    [data-theme='dark'] .e-gantt .e-gridcontent,
    [data-theme='dark'] .e-gantt .e-content {
        background-color: var(--bg-body) !important;
        color: var(--main-font-color) !important;
    }

    /* Màu cho vùng biểu đồ Gantt (bên phải) */
    [data-theme='dark'] .e-gantt .e-chart-root-container,
    [data-theme='dark'] .e-gantt .e-chart-rows-container {
        background-color: var(--bg-body) !important;
    }

    /* Đường kẻ line trong biểu đồ */
    [data-theme='dark'] .e-gantt .e-line-container {
        border-color: var(--main-color) !important;
    }

    /* Màu Header của Gantt */
    [data-theme='dark'] .e-gantt .e-gantt-tree-grid .e-headercell,
    [data-theme='dark'] .e-gantt .e-gantt-chart .e-timeline-header-container {
        background-color: var(--main-color) !important;
        color: var(--main-font-color) !important;
        border-color: var(--bg-body) !important;
    }

    /* Màu cho các dòng "No records to display" */
    [data-theme='dark'] .e-gantt .e-emptyrow {
        color: var(--main-font-color) !important;
        background-color: var(--bg-body) !important;
    }
/* 5. Chỉnh màu cho phần "No records to display" */
[data-theme='dark'] .e-grid .e-emptyrow,
[data-theme='dark'] .e-grid .e-gridcontent .e-emptyrow {
    background-color: var(--bg-body) !important;
    color: var(--main-font-color) !important;
}

/* 6. Chỉnh màu cho Header bảng (Các chữ ID, File, Status...) */
[data-theme='dark'] .e-grid .e-headercell,
[data-theme='dark'] .e-grid .e-headercelldiv {
    background-color: var(--main-color) !important; /* Dùng màu xám đậm của bạn */
    color: var(--main-font-color) !important;
}

/* Chỉnh màu cho các icon lọc (Filter icon) trên header */
[data-theme='dark'] .e-grid .e-icon-filter {
    color: var(--lever2-color) !important;
}

/* 7. Xóa bỏ các đường kẻ trắng ở viền bảng nếu có */
[data-theme='dark'] .e-grid {
    border-color: var(--main-color) !important;
}


.e-dlg-header-content {
    background: var(--bg-body) !important;
    color: var(--main-font-color)
}

.e-dialog {
    background: var(--bg-body) !important;
    color: var(--main-font-color)
}

 .e-dlg-header {
    background: var(--bg-body) !important;
    color: var(--main-font-color)
}
.e-dlg-content {
    background: var(--bg-body) !important;
    color: var(--main-font-color)
}