body.dark-mode, body.dark-mode html {
    background-color: #121212 !important;
    color: #E0E0E0 !important;
}

body.dark-mode .header {
    background-color: #1E1E1E !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .header .title-container h1,
body.dark-mode .header .title-container p {
    color: #E0E0E0;
}

body.dark-mode .menu-item {
    color: #a09f9f !important;
}

body.dark-mode .menu-item.active {
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_link_control {
    display: none;
}

body.dark-mode .menu-item:hover {
    opacity: 0.8;
}

body.dark-mode #projectsList li,
body.dark-mode #sidebar-projectsList li {
    border-color: #464444 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: #1E1E1E !important;
    color: #E0E0E0 !important;
}

body.dark-mode #projectsList li:hover {
    background-color: #2C2C2C !important;
}

body.dark-mode #projectsList > li > ul > li {
    background-color: #2C2C2C;
}

body.dark-mode #projectsList > li > ul > li > ul > li {
    background-color: #333333;
    border-color: #464444;
}

body.dark-mode #gantt_here,
body.dark-mode #scheduler_here {
    border-color: #464444;
    background-color: #1E1E1E;
}

body.dark-mode .gantt-project-name,
body.dark-mode .calendar-project-name {
    color: #65C16F;
}

body.dark-mode .gantt-task-name, body.dark-mode .card.full-width h2 {
    color: #E0E0E0;
}

body.dark-mode .view-gantt-btn,
body.dark-mode #gantt_controls button:not(#project_link) {
    color: #0bf4f3;
    border: 1px solid #0bf4f3;
    box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}

body.dark-mode .view-gantt-btn:hover,
body.dark-mode #gantt_controls button:not(#project_link):hover {
    color: #fff;
    box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}

body.dark-mode #projectSelector,
body.dark-mode #trackerSelector,
body.dark-mode #ganttSearch {
    background-color: #2C2C2C;
    border-color: #464444;
    color: #E0E0E0;
}

body.dark-mode #projectSelector:focus,
body.dark-mode #trackerSelector:focus,
body.dark-mode #ganttSearch:focus {
    border-color: #65C16F;
}

body.dark-mode .selected-project-header {
    background-color: #2C2C2C;
    border-left-color: #65C16F;
}

body.dark-mode .selected-project-header h3 {
    color: #E0E0E0;
}

body.dark-mode .loading-indicator {
    color: #65C16F;
}

body.dark-mode .card.full-width.help-box {
    background-color: #1a3a4a !important;
}

body.dark-mode .card.full-width.warning-box {
    background-color: #4a1a1a !important;
}

body.dark-mode .card.full-width.warning-box p,
body.dark-mode .card.full-width.help-box p {
    color: #E0E0E0;
}


body.dark-mode .sidebar-item:hover {
    background-color: #2C2C2C;
}

body.dark-mode .sidebar-item.highlighted {
    background-color: #333333;
}

body.dark-mode .gantt_grid_data .gantt_cell a,
body.dark-mode .gantt_task_content a {
    color: #E0E0E0;
}

body.dark-mode .gantt_grid_data .gantt_cell a:hover,
body.dark-mode .gantt_task_content a:hover {
    color: #65C16F;
}

body.dark-mode svg {
    color: red;
}

body.dark-mode .project-initial {
    color: #0bf40b;
    border: 1px solid #0bf40b;
    box-shadow:  0 0 5px #0bf40b,  0 0 5px #0bf40b inset;
}

body.dark-mode .tracker-initial {
    color: #0bd9f4;
    border: 1px solid #0bd9f4;
    box-shadow:  0 0 5px #0bd9f4,  0 0 5px #0bd9f4 inset;
}

body.dark-mode .item-initial {
    color: #f4d10b;
    border: 1px solid #f4d10b;
    box-shadow:  0 0 5px #f4d10b,  0 0 5px #f4d10b inset;
}

body.dark-mode .gantt_grid_scale .gantt_grid_head_cell {
    background-color: #2C2C2C;
    border-color: #464444;
    color: #E0E0E0;
}

body.dark-mode .gantt_grid_data .gantt_cell {
    background-color: #1E1E1E;
    border-color: #464444;
    color: #E0E0E0;
}

body.dark-mode .highlight {
    background-color: #4a4a00;
}

body.dark-mode .gantt-controls {
    background-color: #2C2C2C !important;
    border-color: #464444;
}

body.dark-mode .project-name-button {
    background-color: #2C2C2C !important;
    border-color: #464444;
}

body.dark-mode .filters-row {
    background-color: #080808 !important;
    border-color: #464444;
}

@media (max-width: 768px) {
    body.dark-mode #projectsList li {
        background-color: #1E1E1E;
        border-color: #464444;
    }
    
    body.dark-mode .card.full-width h2 {
        color: #E0E0E0;
    }
}

body.dark-mode .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .setting-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .setting-description {
    color: #a09f9f !important;
}

body.dark-mode .slider {
    background-color: #333 !important;
}

body.dark-mode .slider:before {
    background-color: #E0E0E0;
}

body.dark-mode input:checked + .slider {
    background-color: #65C16F !important;
}

body.dark-mode .dhx_cal_container {
    background-color: #1E1E1E;
    color: #E0E0E0;
}

body.dark-mode .dhx_cal_header {
    background-color: #2C2C2C;
    border-color: #464444;
}

body.dark-mode .dhx_scale_bar {
    background-color: #2C2C2C;
    color: #E0E0E0;
    border-color: #464444;
}

body.dark-mode .dhx_cal_data {
    background-color: #1E1E1E;
    border-color: #464444;
}

body.dark-mode .dhx_cal_event {
    background-color: #333333;
    color: #E0E0E0;
}

body.dark-mode .dhx_cal_event_line {
    background-color: #333333;
    color: #E0E0E0;
    border-color: #464444;
}

body.dark-mode .dhx_cal_event_clear {
    color: #E0E0E0;
}

body.dark-mode .gantt_container {
    background-color: #1E1E1E !important;
}

body.dark-mode .gantt_grid {
    background-color: #1E1E1E !important;
}

body.dark-mode .gantt_task {
    background-color: #1E1E1E !important;
}

body.dark-mode .gantt_grid_scale,
body.dark-mode .gantt_scale_line {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_grid_data .gantt_cell {
    border-right: 1px solid #464444 !important;
    color: #E0E0E0 !important;
    background-color: transparent !important;
}

body.dark-mode .gantt_task_line {
    background-color: #65C16F !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_task_content {
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_task_progress {
    background-color: #4a934f !important;
}

body.dark-mode .gantt_grid_head_cell {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_grid_data .gantt_row,
body.dark-mode .gantt_task_row {
    background-color: #1E1E1E !important;
    border-color: #464444 !important;
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_grid_data .gantt_row.odd,
body.dark-mode .gantt_task_row.odd {
    background-color: #252525 !important;
}

body.dark-mode div[role="row"] {
    background-color: #1E1E1E !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode div[role="row"]:nth-child(odd) {
    background-color: #252525 !important;
}

body.dark-mode .gantt_grid_data div {
    background-color: inherit !important;
}

body.dark-mode .dhx_cal_container {
    background-color: #1E1E1E !important;
    color: #E0E0E0 !important;
}

body.dark-mode .dhx_cal_header {
    background-color: #2C2C2C !important;
    border-color: #464444 !important;
}

body.dark-mode .dhx_scale_bar {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .dhx_cal_data {
    background-color: #1E1E1E !important;
    border-color: #464444 !important;
}

body.dark-mode .dhx_cal_event_line {
    background-color: #65C16F !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .dhx_cal_event_clear {
    color: #E0E0E0 !important;
}

body.dark-mode .dhx_cal_navline {
    background-color: #2C2C2C !important;
}

body.dark-mode .dhx_cal_prev_button,
body.dark-mode .dhx_cal_next_button,
body.dark-mode .dhx_cal_today_button,
body.dark-mode .dhx_cal_tab {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .card {
    background-color: #1E1E1E !important;
    border-color: #464444 !important;
}

body.dark-mode .settings-box {
    background-color: #1E1E1E !important;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="search"] {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .view-calendar-btn {
    background-color: #333 !important;
}

body.dark-mode .gantt_scale_line {
    background-color: #2C2C2C !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_scale_cell {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_grid_scale {
    background-color: #2C2C2C !important;
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_task_line.gantt_project {
    background-color: #4a934f !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_task_line.gantt_project .gantt_task_content {
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_row.gantt_project {
    background-color: #2C2C2C !important;
    font-weight: bold;
}

body.dark-mode .gantt_grid_data .gantt_row.odd:hover,
body.dark-mode .gantt_grid_data .gantt_row:hover {
    background-color: #333333 !important;
}

body.dark-mode .dark-mode-icon {
    color: #E0E0E0; 
}

body.dark-mode .dark-mode-toggle:hover .dark-mode-icon {
    color: #FFFFFF; 
}

body.dark-mode .dhx_cal_date {
    color: #E0E0E0 !important;
}

body.dark-mode .menu-item img,
body.dark-mode .dark-mode-icon {
    filter: invert(1);
}

body.dark-mode .logo img {
    filter: none; 
}

body.dark-mode .menu-item:hover img {
    filter: invert(0.8);
}

body.dark-mode .view-gantt-btn img {
    filter: invert(84%) sepia(49%) saturate(6124%) hue-rotate(139deg) brightness(103%) contrast(101%);
    background-color: transparent !important; 
    padding: 0; 
}

body.dark-mode .view-gantt-btn:hover img {
    filter: invert(100%); 
}

body.dark-mode .menu-item img,
body.dark-mode .dark-mode-icon {
    filter: invert(1);
}

body.dark-mode .logo img {
    filter: none;
}

body.dark-mode .progress-bar-container {
    background-color: #444;
}
body.dark-mode .progress-bar {
    background-color: #ffab46;
}
body.dark-mode .progress-percentage {
    color: #aaa;
}

body.dark-mode .dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    width: 40px;
    height: 40px;
}


body.dark-mode .dark-mode-icon {
    width: 24px;
    height: 24px;
    color: #666;
}

body.dark-mode .dark-mode-toggle:hover .dark-mode-icon {
    color: #333;
}

body.dark-mode .view-gantt-btn img {
    filter: invert(1);
}

body.dark-mode .today {
    background-color: rgba(255, 87, 34, 0.2) !important;
    position: relative;
}

body.dark-mode .today::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 2px dashed #FF5722 !important;
    z-index: 1;
}

body.dark-mode .gantt_task_row.odd .today {
    background-color: rgba(255, 87, 34, 0.25) !important;
}

body.dark-mode .gantt_data_area, 
body.dark-mode .gantt_grid_data {
    background-color: #1E1E1E !important;
}

body.dark-mode .gantt_task_bg .gantt_task_cell {
    background-color: #1E1E1E !important;
}

body.dark-mode .gantt_task_bg .gantt_task_cell:nth-child(odd) {
    background-color: #252525 !important;
}

body.dark-mode [style*="background-color"] {
    background-color: inherit !important;
}

body.dark-mode .gantt_row[style],
body.dark-mode .gantt_task_row[style] {
    background-color: #1E1E1E !important;
    color: #E0E0E0 !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_row.odd[style],
body.dark-mode .gantt_task_row.odd[style] {
    background-color: #252525 !important;
}

body.dark-mode .gantt_cell div[style*="background-color:#f0f0f0"],
body.dark-mode .gantt_cell div[style*="background-color: #f0f0f0"] {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
    border: 1px solid #464444 !important;
}

body.dark-mode .gantt_cell div[style*="background-color:#eee"],
body.dark-mode .gantt_cell div[style*="background-color: #eee"] {
    background-color: #333333 !important;
}

body.dark-mode .gantt_cell div[style*="background-color:#eee"] div,
body.dark-mode .gantt_cell div[style*="background-color: #eee"] div {
    background-color: #4a934f !important;
}

body.dark-mode .gantt_cell span[style*="font-size:11px"],
body.dark-mode .gantt_cell span[style*="font-size: 11px"] {
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_cell div[style] {
    border-color: #464444 !important;
}

body.dark-mode .gantt_cell div[style*="display:inline-block; width:80px; height:14px; background-color:#eee"],
body.dark-mode .gantt_cell div[style*="display: inline-block; width: 80px; height: 14px; background-color: #eee"] {
    background-color: #333333 !important;
}

body.dark-mode .gantt_cell div[style*="height:14px; width"] {
    background-color: #4a934f !important;
}

body.dark-mode .gantt_cell div[style*="display:inline-block; padding:1px 6px; border-radius:8px; background-color:#f0f0f0"],
body.dark-mode .gantt_cell div[style*="display: inline-block; padding: 1px 6px; border-radius: 8px; background-color: #f0f0f0"] {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
}

body.dark-mode .gantt_cell div[style*="background-color:#00B0F0"],
body.dark-mode .gantt_cell div[style*="background-color: #00B0F0"] {
    background-color: #00B0F0 !important;
}

body.dark-mode .gantt_cell div[style*="background-color:#ffab46"],
body.dark-mode .gantt_cell div[style*="background-color: #ffab46"] {
    background-color: #ffab46 !important;
}

body.dark-mode .gantt_cell div[style*="height:14px; width"][style*="background-color:#4a934f"] {
    background-color: inherit !important; /* Reset this rule */
}

body.dark-mode .gantt_task_line.gantt_project {
    background-color: #00B0F0 !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_task_line.gantt_project .gantt_task_progress {
    background-color: rgba(0, 176, 240, 0.7) !important;
}

body.dark-mode .gantt_task_line:not(.gantt_project) {
    background-color: #ffab46 !important;
    border-color: #464444 !important;
}

body.dark-mode .gantt_task_line:not(.gantt_project) .gantt_task_progress {
    background-color: rgba(255, 171, 70, 0.7) !important;
}

body.dark-mode .gantt_row.gantt_project .gantt_cell div[style*="display:inline-block; width:80px; height:14px"] div {
    background-color: #00B0F0 !important;
}

body.dark-mode .gantt_row:not(.gantt_project) .gantt_cell div[style*="display:inline-block; width:80px; height:14px"] div {
    background-color: #ffab46 !important;
}

body.dark-mode .gantt_cell div[style*="display:inline-block; padding:1px 6px; border-radius:8px; background-color:#f0f0f0"],
body.dark-mode .gantt_cell div[style*="display: inline-block; padding: 1px 6px; border-radius: 8px; background-color: #f0f0f0"] {
    background-color: #333333 !important;
    color: #E0E0E0 !important;
    border: 1px solid #464444 !important;
}

body.dark-mode .gantt_grid_data .gantt_row.gantt_project,
body.dark-mode .gantt_task_row.gantt_project {
    background-color: rgba(0, 176, 240, 0.1) !important;
    font-weight: bold;
}

body.dark-mode .gantt_grid_data .gantt_row.gantt_project.odd,
body.dark-mode .gantt_task_row.gantt_project.odd {
    background-color: rgba(0, 176, 240, 0.15) !important;
}

body.dark-mode .assignee-filter-select {
    background-color: #333;
    color: #f0f0f0;
    border-color: #555;
}

body.dark-mode .assignee-filter-select:hover {
    border-color: #007bff;
}

body.dark-mode .assignee-filter-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

body.dark-mode .filter-label span {
    color: #f0f0f0;
}

body.dark-mode .gantt_link_arrow {
    border-color: #4a90e2;
}

body.dark-mode .gantt_line_wrapper div {
    background-color: #4a90e2;
}

body.dark-mode .gantt_link_control {
    background-color: #4a90e2;
}

body.dark-mode .gantt_task_link:hover .gantt_line_wrapper div {
    background-color: #6ba3e8;
    box-shadow: 0 0 5px rgba(107, 163, 232, 0.8);
}

body.dark-mode .gantt_task_link:hover .gantt_link_arrow {
    border-color: #6ba3e8;
}

body.dark-mode .project-note-input {
    background-color: #2C2C2C;
    color: #E0E0E0;
    border-color: #464444;
}

body.dark-mode .project-note-input:focus {
    border-color: #65C16F;
    box-shadow: 0 0 0 3px rgba(101, 193, 111, 0.15);
    background: #252525;
}

body.dark-mode .project-note-sticky {
    background: linear-gradient(135deg, #4a4a35 0%, #3d3d2a 100%);
    border-color: #5a5a3f;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

body.dark-mode .project-note-sticky:hover {
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

body.dark-mode .project-note-pin {
    background: radial-gradient(circle, #6a6a6a 0%, #4a4a4a 100%);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .project-note-pin::after {
    background: #8a8a8a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.dark-mode .project-note-wrapper {
    background-color: #1E1E1E;
}

body.dark-mode .project-note-content {
    color: #E0E0E0;
}

body.dark-mode .project-note-content[contenteditable="true"] {
    background: rgba(60, 60, 60, 0.5);
    border-color: rgba(101, 193, 111, 0.5);
}

body.dark-mode .project-note-actions {
    border-top-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .project-note-edit,
body.dark-mode .project-note-delete {
    background: rgba(60, 60, 60, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #E0E0E0;
    opacity: 0.8;
}

body.dark-mode .project-note-edit:hover,
body.dark-mode .project-note-delete:hover {
    opacity: 1;
    background: rgba(70, 70, 70, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}