/* Base Styles (Dark Mode by Default) */
body {
    background-color: #1a1a1a;
    color: #e5e7eb;
    font-family: Rubik;
}
h1, h2, h3, h4 {
    font-family: Rubik;
}
p {
            font-family: Rubik;
    text-shadow: 0px 0px 0px black;
}
a {
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make text bold */
    
}

.dark-card {
    background: linear-gradient(145deg, #252525, #1a1a1a);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.table-dark {
    --bs-table-color: #c9c9c9;
    --bs-table-bg: #202123;
    --bs-table-border-color: #35373a;
    --bs-table-striped-bg: #2c3034;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #ffffff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.calendar-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    scroll-behavior: smooth;
}

.calendar-btn {
    flex: 1 1 calc(8.333% - 0.5rem);
    text-align: center;
    background: #202123;
    color: #aaaaaa;
    padding: 0.5rem 0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    min-width: 60px;
}

    .calendar-btn.selected {
        background: #353740;
        border: 2px solid #aaaaaa;
        color: #ffffff;
    }

th, td {
    padding: 0.75rem;
    border-bottom: 1px solid #444;
}

thead {
    background-color: #3b3b3b;
}

tbody tr:hover {
    background-color: #3a3a3a;
}

.dataTables_wrapper {
    color: #aaaaaa;
}

table.dataTable tbody tr {
    background-color: #2c2c2c;
}

.dataTables_filter input,
.dataTables_length select {
    background-color: #1a1a1a;
    color: #aaaaaa;
    border: 1px solid #444;
}

.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dataTables_filter label > span {
        display: none;
    }
.dashboard-header {
    display: flex;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.55);
    padding: 10px 50px 10px 15px;
    border-radius: 8px;
    gap: 10px;
}

.dashboard-title {
    margin: 0;
    font-size: medium;
}

.dashboard-system-name {
    font-size: medium;
    flex-grow: 1;
    text-align: center;
    color: #ffffff; /* or #212529 in light mode */
}

.toggle-mode-btn {
    font-size: xx-large;
    border: none;
    border-radius: 1000px;
    padding: 0px 20px;
    background: none;
    color: inherit;
}



/* Timeline */
.timeline {
    border-left: 2px solid #555;
    margin-left: 1rem;
    padding-left: 1rem;
    position: relative;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

    .timeline-item::before {
        content: "";
        position: absolute;
        left: -1.1rem;
        top: 0.3rem;
        width: 12px;
        height: 12px;
        background-color: #777;
        border: 2px solid #1a1a1a;
        border-radius: 50%;
        z-index: 1;
    }

    .timeline-item.success::before {
        background-color: #198754;
    }

    .timeline-item.info::before {
        background-color: #0dcaf0;
    }

    .timeline-item.warning::before {
        background-color: #ffc107;
    }

    .timeline-item p {
        margin: 0;
        color: #e5e7eb;
    }

    .timeline-item small {
        color: #888;
    }

/* Custom Checkbox */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .custom-checkbox .checkmark {
        position: absolute;
        top: -12px;
        left: 7px;
        height: 25px;
        width: 25px;
        background-color: #59e949;
        border-radius: 4px;
    }

    .custom-checkbox:hover .checkmark {
        background-color: #bbb;
    }

    .custom-checkbox input:checked ~ .checkmark {
        background-color: #d61c1c;
    }

    .custom-checkbox .checkmark::after {
        content: "";
        position: absolute;
        display: none;
    }

    .custom-checkbox input:checked ~ .checkmark::after {
        display: block;
        left: 5px;
        top: 3px;
        width: 15px;
        height: 15px;
        border-radius: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

/* ---------------------- */
/* LIGHT MODE OVERRIDES  */

/* === LIGHT MODE === */
body.light-mode #mynewnav {
    background: linear-gradient(to right, #d0d2d6, #b5b7ba); /* soft light blend */
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* === DARK MODE === */
body.dark-mode #mynewnav {
    background: linear-gradient(to right, #1c1e21, #3a3b3c); /* dark slate blend */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* === NATURE MODE === */
body.nature-mode #mynewnav {
    background: linear-gradient(to right, #118088, #146c43); /* deep teal → forest */
    border-bottom: 1px solid rgba(18, 88, 70, 0.3);
}

/* === SEA MODE === */
body.sea-mode #mynewnav {
    background: linear-gradient(to right, #0077b6, #00b4d8); /* ocean blue to aqua */
    border-bottom: 1px solid rgba(0, 119, 182, 0.3);
}

/* === MARS MODE === */
body.mars-mode #mynewnav {
    background: linear-gradient(to right, #802f2f, #c1440e); /* lava red to flame */
    border-bottom: 1px solid rgba(255, 80, 30, 0.3);
}

/* === SUN MODE === */
body.sun-mode #mynewnav {
    background: linear-gradient(to right, #ffca28, #f57f17); /* golden yellow → amber */
    border-bottom: 1px solid rgba(230, 140, 0, 0.3);
}

/* === SHADOW MODE === */
body.shadow-mode #mynewnav {
    background: linear-gradient(to right, #9e9e9e, #6d6d6d); /* silver to medium gray */
    border-bottom: 1px solid rgba(50, 50, 50, 0.25);
}


/* ---------------------- */
body.light-mode {
    background-color: #e0e0e3; /* Slightly darker than Facebook’s #f0f2f5 */
    color: #1c1e21; /* Soft black text */
}

    body.light-mode .dark-card {
        background: #f5f5f7; /* Light gray with a gentle tone */
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
    }

    body.light-mode .table-dark {
        --bs-table-color: #1c1e21;
        --bs-table-bg: #fbfbfc; /* Off-white for softer contrast */
        --bs-table-border-color: #d0d3d6; /* Soft edge */
        --bs-table-striped-bg: #eaeaec; /* Light stripe */
        --bs-table-hover-bg: #dfe1e5; /* Hover tone with subtle darkness */
        --bs-table-hover-color: #111;
        color: var(--bs-table-color);
        border-color: var(--bs-table-border-color);
    }

/* === Facebook-style Light Mode === */
body.light-mode {
    background-color: #f0f2f5;
    color: #050505;
    font-family: Rubik;
}

    /* === Cards / Panels === */
    body.light-mode .dark-card {
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        padding: 1rem;
    }

    /* === Table Styling === */
    body.light-mode .table-dark {
        --bs-table-color: #050505;
        --bs-table-bg: #ffffff;
        --bs-table-border-color: #dddfe2;
        --bs-table-striped-bg: #f5f6f7;
        --bs-table-hover-bg: #ebedf0;
        --bs-table-hover-color: #000000;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    body.light-mode th,
    body.light-mode td {
        border-bottom: 1px solid #dddfe2;
        color: #050505;
    }

    body.light-mode thead {
        background-color: #f0f2f5;
        color: #050505;
    }

    body.light-mode tbody tr:hover {
        background-color: #ebedf0;
    }

    /* === Buttons === */


    body.light-mode button {
        color: black;
        border-radius: 4px;
    }
    body.light-mode .calendar-btn {
        color: #7c7f82;
        border-radius: 4px;
    }
        body.light-mode .calendar-btn.selected {
            background: #ffffff;
            border: 2px solid #aaaaaa;
            color: black;
        }
    /* === Inputs === */
    body.light-mode input,
    body.light-mode textarea,
    body.light-mode select {
        background-color: #ffffff;
        border: 1px solid #ccd0d5;
        color: #050505;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
    }

        body.light-mode input:focus,
        body.light-mode textarea:focus,
        body.light-mode select:focus {
            outline: none;
            border-color: #050505;
            background-color: #ffffff;
        }

    /* === Navbar/Header === */
    body.light-mode .navbar,
    body.light-mode .header {
        background-color: #ffffff;
        color: #050505;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* === Scrollbar === */
    body.light-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.light-mode ::-webkit-scrollbar-track {
        background: #e4e6eb;
    }

    body.light-mode ::-webkit-scrollbar-thumb {
        background: #c5c7ca;
    }

        body.light-mode ::-webkit-scrollbar-thumb:hover {
            background: #a9abaf;
        }

    /* === Timeline === */
    body.light-mode .timeline {
        border-left: 2px solid #ccd0d5;
    }

    body.light-mode .timeline-item::before {
        background-color: #ccd0d5;
        border-color: #ffffff;
    }

    body.light-mode .timeline-item p {
        color: #050505;
    }

    body.light-mode .timeline-item small {
        color: #65676b;
    }

    /* === Footer === */
    body.light-mode .myfooter span,
    body.light-mode .myfooter i {
        color: #65676b;
    }

    /* === Alerts / Toasts === */
    body.light-mode .alert,
    body.light-mode .toast {
        background-color: #ffffff;
        color: #050505;
        border: 1px solid #ccd0d5;
    }

    /* === Checkbox === */
    body.light-mode .custom-checkbox .checkmark {
        background-color: #42b72a;
        border: 1px solid #36a420;
    }

    body.light-mode .custom-checkbox:hover .checkmark {
        background-color: #cfd1d5;
    }

    /* === DataTables Search / Select === */
    body.light-mode .dataTables_filter input,
    body.light-mode .dataTables_length select {
        background-color: #ffffff;
        color: #050505;
        border: 1px solid #ccd0d5;
        border-radius: 4px;
        padding: 0.4rem;
    }

/* cards, tables, buttons, inputs, etc. for .light-mode */
...
/* === DARK MODE === */
body.dark-mode {
    background-color: #18191a;
    color: #e4e6eb;
}
/* dark cards, dark buttons, etc. for .dark-mode */

/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */


/* === NATURE MODE BASE === */
body.nature-mode {
    background-color: #e3f5ec; /* soft minty leaf */
    color: #0e2f2f; /* dark forest green text */
    font-family: Rubik;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* === Cards / Panels === */
    body.nature-mode .dark-card {
        background: linear-gradient(145deg, #d6f0e2, #eafaf2); /* nature gradient */
        box-shadow: 0 3px 10px rgba(0, 64, 64, 0.2);
        border-radius: 12px;
        padding: 1rem;
        transition: box-shadow 0.3s;
    }

    /* === Table Styling === */
    body.nature-mode .table-dark {
        --bs-table-color: #0e2f2f;
        --bs-table-bg: #f0fbf7;
        --bs-table-border-color: #a8d5c2;
        --bs-table-striped-bg: #d8f2e6;
        --bs-table-hover-bg: #c1e6d6;
        --bs-table-hover-color: #0b2323;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    /* === Table Elements === */
    body.nature-mode th,
    body.nature-mode td {
        border-bottom: 1px solid #b6e0cf;
        color: #0f2e2e;
    }

    body.nature-mode thead {
        background-color: #c4e8da;
        color: #0f2e2e;
    }

    body.nature-mode tbody tr:hover {
        background-color: #d4f0e3;
    }

    /* === DataTables Wrapper & Inputs === */
    body.nature-mode .dataTables_wrapper {
        color: #0f2e2e;
    }

    body.nature-mode table.dataTable tbody tr {
        background-color: #f5fdf8;
    }

    body.nature-mode .dataTables_filter input,
    body.nature-mode .dataTables_length select {
        background-color: #ecf9f2;
        color: #0f2e2e;
        border: 1px solid #9cd8c1;
        border-radius: 6px;
        padding: 0.4rem;
    }

    /* === Buttons === */
 

    /* === Inputs / Select / Textareas === */
    body.nature-mode input,
    body.nature-mode select,
    body.nature-mode textarea {
        background-color: #f0fbf7;
        border: 1px solid #9cd8c1;
        color: #28a745;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
    }

        body.nature-mode input:focus,
        body.nature-mode textarea:focus,
        body.nature-mode select:focus {
            outline: none;
            border-color: #36a989;
            background-color: #ffffff;

        }

    /* === Navbar / Header === */
    body.nature-mode .navbar,
    body.nature-mode .header {
        background-color: #b1dfcd;
        color: #0e2f2f;
        box-shadow: 0 2px 4px rgba(0, 64, 64, 0.15);
    }

    /* === Timeline === */
    body.nature-mode .timeline {
        border-left: 3px solid #7cc4a2;
    }

    body.nature-mode .timeline-item::before {
        background-color: #7cc4a2;
        border-color: #f0fbf7;
    }

    body.nature-mode .timeline-item p {
        color: #0f2e2e;
    }

    body.nature-mode .timeline-item small {
        color: #5d8370;
    }

    /* === Checkboxes === */
    body.nature-mode .custom-checkbox .checkmark {
        background-color: #36a989;
        border: 1px solid #2e8b75;
    }

    body.nature-mode .custom-checkbox:hover .checkmark {
        background-color: #85d4bb;
    }

    /* === Footer === */
    body.nature-mode .myfooter span,
    body.nature-mode .myfooter i {
        color: #2f4f4f;
    }

    /* === Toasts / Alerts === */
    body.nature-mode .alert,
    body.nature-mode .toast {
        background-color: #d7f1e4;
        color: #0f2e2e;
        border: 1px solid #9cd8c1;
    }

    /* === Scrollbar Styling === */
    body.nature-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.nature-mode ::-webkit-scrollbar-track {
        background: #e3f5ec;
    }

    body.nature-mode ::-webkit-scrollbar-thumb {
        background: #7cc4a2;
    }

        body.nature-mode ::-webkit-scrollbar-thumb:hover {
            background: #5da58b;
        }




/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
/* === NATURE MODE === */
 /*seeeeeeeeeeeeeeeeee*/




/* === SEA MODE BASE === */
body.sea-mode {
    background-color: #d1f0f7; /* light aqua background */
    color: #083c4c; /* deep ocean blue for text */
            font-family: Rubik;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* === Cards / Panels === */
    body.sea-mode .dark-card {
        background: linear-gradient(145deg, #bee8f1, #e1f9fd); /* ocean wave gradient */
        box-shadow: 0 3px 10px rgba(0, 64, 128, 0.15);
        border-radius: 12px;
        padding: 1rem;
    }

    /* === Table Styling === */
    body.sea-mode .table-dark {
        --bs-table-color: #083c4c;
        --bs-table-bg: #e5faff;
        --bs-table-border-color: #9fd8e0;
        --bs-table-striped-bg: #c9f1f6;
        --bs-table-hover-bg: #b4e5ed;
        --bs-table-hover-color: #052731;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    body.sea-mode th,
    body.sea-mode td {
        border-bottom: 1px solid #a5dbe3;
        color: #083c4c;
    }

    body.sea-mode thead {
        background-color: #b9e7f0;
        color: #083c4c;
    }

    body.sea-mode tbody tr:hover {
        background-color: #d3f5fa;
    }

    /* === DataTables and Inputs === */
    body.sea-mode .dataTables_wrapper {
        color: #083c4c;
    }

    body.sea-mode table.dataTable tbody tr {
        background-color: #f0fcff;
    }

    body.sea-mode .dataTables_filter input,
    body.sea-mode .dataTables_length select {
        background-color: #e0f9fd;
        color: #083c4c;
        border: 1px solid #91d0dc;
        border-radius: 6px;
        padding: 0.4rem;
    }

    /* === Buttons === */
 

    /* === Inputs / Select / Textareas === */
    body.sea-mode input,
    body.sea-mode select,
    body.sea-mode textarea {
        background-color: #f0fcff;
        border: 1px solid #9fd8e0;
        color: #083c4c;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
    }

        body.sea-mode input:focus,
        body.sea-mode textarea:focus,
        body.sea-mode select:focus {
            outline: none;
            border-color: #168aad;
            background-color: #ffffff;
        }

    /* === Navbar / Header === */
    body.sea-mode .navbar,
    body.sea-mode .header {
        background-color: #a0dce6;
        color: #083c4c;
        box-shadow: 0 2px 4px rgba(0, 64, 128, 0.1);
    }

    /* === Timeline === */
    body.sea-mode .timeline {
        border-left: 3px solid #49c1d9;
    }

    body.sea-mode .timeline-item::before {
        background-color: #49c1d9;
        border-color: #e5faff;
    }

    body.sea-mode .timeline-item p {
        color: #083c4c;
    }

    body.sea-mode .timeline-item small {
        color: #5f8b94;
    }

    /* === Checkboxes === */
    body.sea-mode .custom-checkbox .checkmark {
        background-color: #168aad;
        border: 1px solid #126a8b;
    }

    body.sea-mode .custom-checkbox:hover .checkmark {
        background-color: #6dd6f0;
    }

    /* === Footer === */
    body.sea-mode .myfooter span,
    body.sea-mode .myfooter i {
        color: #0a4e5f;
    }

    /* === Alerts / Toasts === */
    body.sea-mode .alert,
    body.sea-mode .toast {
        background-color: #c7f0f9;
        color: #083c4c;
        border: 1px solid #8bd7e6;
    }

    /* === Scrollbar === */
    body.sea-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.sea-mode ::-webkit-scrollbar-track {
        background: #d1f0f7;
    }

    body.sea-mode ::-webkit-scrollbar-thumb {
        background: #49c1d9;
    }

        body.sea-mode ::-webkit-scrollbar-thumb:hover {
            background: #2ea3be;
        }

        /*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/*seaaaaaaaaaaaaaaaaa*/
/* === MARS MODE BASE === */
body.mars-mode {
    background-color: #2c1a1a; /* dark volcanic red */
    color: #ffdbc2; /* dusty cream sand text */
 font-family: Rubik;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* === Cards / Panels === */
    body.mars-mode .dark-card {
        background: linear-gradient(145deg, #4a2b2b, #5e2f2f);
        box-shadow: 0 4px 12px rgba(255, 85, 0, 0.15);
        border-radius: 12px;
        padding: 1rem;
    }

    /* === Table Styling === */
    body.mars-mode .table-dark {
        --bs-table-color: #ffdbc2;
        --bs-table-bg: #3c2a2a;
        --bs-table-border-color: #704444;
        --bs-table-striped-bg: #492f2f;
        --bs-table-hover-bg: #5c3a3a;
        --bs-table-hover-color: #fff1e8;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    body.mars-mode th,
    body.mars-mode td {
        border-bottom: 1px solid #704444;
        color: #ffd5b0;
    }

    body.mars-mode thead {
        background-color: #5b2d2d;
        color: #ffd5b0;
    }

    body.mars-mode tbody tr:hover {
        background-color: #6a3b3b;
    }

    /* === DataTables and Inputs === */
    body.mars-mode .dataTables_wrapper {
        color: #ffdbc2;
    }

    body.mars-mode table.dataTable tbody tr {
        background-color: #3e2a2a;
    }

    body.mars-mode .dataTables_filter input,
    body.mars-mode .dataTables_length select {
        background-color: #5a3a3a;
        color: #ffdbc2;
        border: 1px solid #a65a4a;
        border-radius: 6px;
        padding: 0.4rem;
    }

    /* === Buttons === */
 

    /* === Inputs / Select / Textareas === */
    body.mars-mode input,
    body.mars-mode select,
    body.mars-mode textarea {
        background-color: #3c2a2a;
        border: 1px solid #a65a4a;
        color: #d19e10;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
        
    }

        body.mars-mode input:focus,
        body.mars-mode textarea:focus,
        body.mars-mode select:focus {
            outline: none;
            border-color: #ff784f;
            background-color: #4f3434;
            color: #d19e10;
        }
        body.mars-mode input::placeholder,
        body.mars-mode textarea::placeholder,
        body.mars-mode select::placeholder {
            color: #d19e10;
            opacity: 0.4; /* Optional: Adjusts visibility */
        }

    /* === Navbar / Header === */
    body.mars-mode .navbar,
    body.mars-mode .header {
        background-color: #4c2525;
        color: #ffdbc2;
        box-shadow: 0 2px 4px rgba(255, 85, 0, 0.1);
    }

    /* === Timeline === */
    body.mars-mode .timeline {
        border-left: 3px solid #ff784f;
    }

    body.mars-mode .timeline-item::before {
        background-color: #ff784f;
        border-color: #2c1a1a;
    }

    body.mars-mode .timeline-item p {
        color: #ffdbc2;
    }

    body.mars-mode .timeline-item small {
        color: #cc9880;
    }

    /* === Checkboxes === */
    body.mars-mode .custom-checkbox .checkmark {
        background-color: #c1440e;
        border: 1px solid #9e350c;
    }

    body.mars-mode .custom-checkbox:hover .checkmark {
        background-color: #ff784f;
    }

    /* === Footer === */
    body.mars-mode .myfooter span,
    body.mars-mode .myfooter i {
        color: #d8b4a0;
    }

    /* === Alerts / Toasts === */
    body.mars-mode .alert,
    body.mars-mode .toast {
        background-color: #5e2f2f;
        color: #ffdbc2;
        border: 1px solid #a65a4a;
    }

    /* === Scrollbar === */
    body.mars-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.mars-mode ::-webkit-scrollbar-track {
        background: #2c1a1a;
    }

    body.mars-mode ::-webkit-scrollbar-thumb {
        background: #a65a4a;
    }

        body.mars-mode ::-webkit-scrollbar-thumb:hover {
            background: #c1440e;
        }
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/*marssss*/
/* Add matching inputs, navbar, timeline, etc. for .nature-mode */

/* === SUN MODE BASE === */
body.sun-mode {
    background-color: #fff9e6; /* soft yellow cream */
    color: #5a3e00; /* warm dark golden-brown */
 font-family: Rubik;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* === Cards / Panels === */
    body.sun-mode .dark-card {
        background: linear-gradient(145deg, #fff4cc, #fffbec);
        box-shadow: 0 4px 10px rgba(255, 204, 51, 0.2);
        border-radius: 12px;
        padding: 1rem;
    }

    /* === Table Styling === */
    body.sun-mode .table-dark {
        --bs-table-color: #4b3500;
        --bs-table-bg: #fffdf3;
        --bs-table-border-color: #ffd366;
        --bs-table-striped-bg: #fff3c2;
        --bs-table-hover-bg: #ffe69b;
        --bs-table-hover-color: #3e2c00;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    body.sun-mode th,
    body.sun-mode td {
        border-bottom: 1px solid #ffd366;
        color: #5a3e00;
    }

    body.sun-mode thead {
        background-color: #ffedb3;
        color: #5a3e00;
    }

    body.sun-mode tbody tr:hover {
        background-color: #ffefb0;
    }

    /* === DataTables and Inputs === */
    body.sun-mode .dataTables_wrapper {
        color: #5a3e00;
    }

    body.sun-mode table.dataTable tbody tr {
        background-color: #fffef7;
    }

    body.sun-mode .dataTables_filter input,
    body.sun-mode .dataTables_length select {
        background-color: #fff7da;
        color: #5a3e00;
        border: 1px solid #ffd366;
        border-radius: 6px;
        padding: 0.4rem;
    }

    /* === Buttons === */
     
    /* === Inputs / Select / Textareas === */
    body.sun-mode input,
    body.sun-mode select,
    body.sun-mode textarea {
        background-color: #fffef7;
        border: 1px solid #ffcd70;
        color: #5a3e00;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
    }

        body.sun-mode input:focus,
        body.sun-mode textarea:focus,
        body.sun-mode select:focus {
            outline: none;
            border-color: #f7b500;
            background-color: #ffffff;
        }

    /* === Navbar / Header === */
    body.sun-mode .navbar,
    body.sun-mode .header {
        background-color: #ffe185;
        color: #5a3e00;
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
    }

    /* === Timeline === */
    body.sun-mode .timeline {
        border-left: 3px solid #f7b500;
    }

    body.sun-mode .timeline-item::before {
        background-color: #f7b500;
        border-color: #fff9e6;
    }

    body.sun-mode .timeline-item p {
        color: #5a3e00;
    }

    body.sun-mode .timeline-item small {
        color: #a67300;
    }

    /* === Checkboxes === */
    body.sun-mode .custom-checkbox .checkmark {
        background-color: #f7b500;
        border: 1px solid #e3a000;
    }

    body.sun-mode .custom-checkbox:hover .checkmark {
        background-color: #ffd85c;
    }

    /* === Footer === */
    body.sun-mode .myfooter span,
    body.sun-mode .myfooter i {
        color: #4b3500;
    }

    /* === Alerts / Toasts === */
    body.sun-mode .alert,
    body.sun-mode .toast {
        background-color: #fff4cc;
        color: #5a3e00;
        border: 1px solid #ffcc66;
    }

    /* === Scrollbar === */
    body.sun-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.sun-mode ::-webkit-scrollbar-track {
        background: #fff8e1;
    }

    body.sun-mode ::-webkit-scrollbar-thumb {
        background: #f7b500;
    }

        body.sun-mode ::-webkit-scrollbar-thumb:hover {
            background: #e3a000;
        }
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/*sunnnnnnnnn*/
/* === SHADOW MODE BASE === */
body.shadow-mode {
    background-color: #e1e2e4; /* soft cloud-gray */
    color: #2d2f31; /* rich stone text */
 font-family: Rubik;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* === Cards / Panels === */
    body.shadow-mode .dark-card {
        background: linear-gradient(145deg, #f0f0f2, #d7d8da);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 1rem;
    }

    /* === Table Styling === */
    body.shadow-mode .table-dark {
        --bs-table-color: #2d2f31;
        --bs-table-bg: #ffffff;
        --bs-table-border-color: #c8c9cb;
        --bs-table-striped-bg: #f1f1f3;
        --bs-table-hover-bg: #e4e5e7;
        --bs-table-hover-color: #111;
        color: var(--bs-table-color);
        background-color: var(--bs-table-bg);
        border-color: var(--bs-table-border-color);
    }

    body.shadow-mode th,
    body.shadow-mode td {
        border-bottom: 1px solid #c8c9cb;
        color: #2d2f31;
    }

    body.shadow-mode thead {
        background-color: #dfe0e2;
        color: #1d1f21;
    }

    body.shadow-mode tbody tr:hover {
        background-color: #e8e9eb;
    }

    /* === DataTables and Inputs === */
    body.shadow-mode .dataTables_wrapper {
        color: #2d2f31;
    }

    body.shadow-mode table.dataTable tbody tr {
        background-color: #f9fafa;
    }

    body.shadow-mode .dataTables_filter input,
    body.shadow-mode .dataTables_length select {
        background-color: #f0f1f2;
        color: #2d2f31;
        border: 1px solid #bbb;
        border-radius: 6px;
        padding: 0.4rem;
    }

    /* === Buttons === */
 

    /* === Inputs / Select / Textareas === */
    body.shadow-mode input,
    body.shadow-mode select,
    body.shadow-mode textarea {
        background-color: #f8f9fa;
        border: 1px solid #ccc;
        color: #2d2f31;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
    }

        body.shadow-mode input:focus,
        body.shadow-mode textarea:focus,
        body.shadow-mode select:focus {
            outline: none;
            border-color: #999da1;
            background-color: #ffffff;
        }

    /* === Navbar / Header === */
    body.shadow-mode .navbar,
    body.shadow-mode .header {
        background-color: #d2d3d5;
        color: #2d2f31;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* === Timeline === */
    body.shadow-mode .timeline {
        border-left: 3px solid #a1a3a6;
    }

    body.shadow-mode .timeline-item::before {
        background-color: #a1a3a6;
        border-color: #e1e2e4;
    }

    body.shadow-mode .timeline-item p {
        color: #2d2f31;
    }

    body.shadow-mode .timeline-item small {
        color: #666;
    }

    /* === Checkboxes === */
    body.shadow-mode .custom-checkbox .checkmark {
        background-color: #999da1;
        border: 1px solid #7c7f82;
    }

    body.shadow-mode .custom-checkbox:hover .checkmark {
        background-color: #bbb;
    }

    /* === Footer === */
    body.shadow-mode .myfooter span,
    body.shadow-mode .myfooter i {
        color: #555;
    }

    /* === Alerts / Toasts === */
    body.shadow-mode .alert,
    body.shadow-mode .toast {
        background-color: #f0f1f2;
        color: #2d2f31;
        border: 1px solid #bbb;
    }

    /* === Scrollbar === */
    body.shadow-mode ::-webkit-scrollbar {
        width: 10px;
    }

    body.shadow-mode ::-webkit-scrollbar-track {
        background: #e1e2e4;
    }

    body.shadow-mode ::-webkit-scrollbar-thumb {
        background: #999da1;
    }

        body.shadow-mode ::-webkit-scrollbar-thumb:hover {
            background: #7c7f82;
        }

/*sunnnnnnnnn*/

#incomeChart {
    min-height: 240px;
}

@media (max-width: 768px) {
    #incomeChart {
        min-height: 320px;
    }
}
/* Enable RTL direction */
body.rtl {
    direction: rtl;
}

    /* Adjust dashboard header padding and alignment */
    body.rtl .dashboard-header {
        padding: 10px 15px 10px 50px;
        flex-direction: row-reverse;
    }

    body.rtl .dashboard-title {
        text-align: right;
    }

    body.rtl .dashboard-system-name {
        text-align: center;
    }

    /* Adjust calendar bar if needed */
    body.rtl .calendar-bar {
        flex-direction: row-reverse;
    }

    /* Timeline: Flip the vertical line and markers */
    body.rtl .timeline {
        border-left: none;
        border-right: 2px solid #555;
        margin-left: 0;
        margin-right: 1rem;
        padding-left: 0;
        padding-right: 1rem;
    }

    body.rtl .timeline-item::before {
        left: auto;
        right: -1.1rem;
    }

    /* Custom Checkbox: Flip checkmark positioning */
    body.rtl .custom-checkbox {
        padding-left: 0;
        padding-right: 30px;
    }

        body.rtl .custom-checkbox .checkmark {
            left: auto;
            right: 7px;
        }

        body.rtl .custom-checkbox input:checked ~ .checkmark::after {
            left: auto;
            right: 5px;
        }

    /* DataTables: Align filter input on the left */
    body.rtl .dataTables_filter label {
        flex-direction: row-reverse;
    }
.custom01 {
    margin: 10px;
    float: left;
    position: relative;
    top: -20px;
 
    }
.custom02 {
    width: 100%;
    text-align: center;
    float: right
}
.select2-container {
    color: black
}
/* === LIGHT MODE === */
body.light-mode .btn-primary {
    background: linear-gradient(to right, #1877f2, #165ecf); /* Facebook blue blend */
    border: none;
    color: #fff;
}

    body.light-mode .btn-primary:hover {
        background: linear-gradient(to right, #165ecf, #1877f2);
    }

/* === DARK MODE === */
body.dark-mode .btn-primary {
    background: linear-gradient(to right, #3a3b3c, #242526);
    border: none;
    color: #fff;
}

    body.dark-mode .btn-primary:hover {
        background: linear-gradient(to right, #242526, #3a3b3c);
    }

/* === NATURE MODE === */
body.nature-mode .btn-primary {
    background: linear-gradient(to right, #118088, #146c43);
    border: none;
    color: #fff;
}

    body.nature-mode .btn-primary:hover {
        background: linear-gradient(to right, #146c43, #118088);
    }

/* === SEA MODE === */
body.sea-mode .btn-primary {
    background: linear-gradient(to right, #0077b6, #00b4d8);
    border: none;
    color: #fff;
}

    body.sea-mode .btn-primary:hover {
        background: linear-gradient(to right, #00b4d8, #0077b6);
    }

/* === MARS MODE === */
body.mars-mode .btn-primary {
    background: linear-gradient(to right, #802f2f, #c1440e);
    border: none;
    color: #fff;
}

    body.mars-mode .btn-primary:hover {
        background: linear-gradient(to right, #c1440e, #802f2f);
    }

/* === SUN MODE === */
body.sun-mode .btn-primary {
    background: linear-gradient(to right, #ffca28, #f57f17);
    border: none;
    color: #fff;
}

    body.sun-mode .btn-primary:hover {
        background: linear-gradient(to right, #f57f17, #ffca28);
    }

/* === SHADOW MODE === */
body.shadow-mode .btn-primary {
    background: linear-gradient(to right, #7c7f82, #999da1);
    border: none;
    color: #fff;
}

    body.shadow-mode .btn-primary:hover {
        background: linear-gradient(to right, #999da1, #7c7f82);
    }
/* === LIGHT MODE === */
body.light-mode .btn-success {
    background: linear-gradient(to right, #28a745, #1877f2); /* green + Facebook blue */
}

    body.light-mode .btn-success:hover {
        background: linear-gradient(to right, #1877f2, #28a745);
    }

/* === DARK MODE === */
body.dark-mode .btn-success {
    background: linear-gradient(to right, #28a745, #3a3b3c); /* green + dark gray */
}

    body.dark-mode .btn-success:hover {
        background: linear-gradient(to right, #3a3b3c, #28a745);
    }

/* === NATURE MODE === */
body.nature-mode .btn-success {
    background: linear-gradient(to right, #28a745, #118088); /* green + teal */
}

    body.nature-mode .btn-success:hover {
        background: linear-gradient(to right, #118088, #28a745);
    }

/* === SEA MODE === */
body.sea-mode .btn-success {
    background: linear-gradient(to right, #28a745, #00b4d8); /* green + aqua */
}

    body.sea-mode .btn-success:hover {
        background: linear-gradient(to right, #00b4d8, #28a745);
    }

/* === MARS MODE === */
body.mars-mode .btn-success {
    background: linear-gradient(to right, #28a745, #c1440e); /* green + mars red */
}

    body.mars-mode .btn-success:hover {
        background: linear-gradient(to right, #c1440e, #28a745);
    }

/* === SUN MODE === */
body.sun-mode .btn-success {
    background: linear-gradient(to right, #28a745, #ffca28); /* green + golden yellow */
}

    body.sun-mode .btn-success:hover {
        background: linear-gradient(to right, #ffca28, #28a745);
    }

/* === SHADOW MODE === */
body.shadow-mode .btn-success {
    background: linear-gradient(to right, #28a745, #7c7f82); /* green + gray */
}

    body.shadow-mode .btn-success:hover {
        background: linear-gradient(to right, #7c7f82, #28a745);
    }

/* === LIGHT MODE === */
body.light-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #1877f2); /* red + Facebook blue */
}

    body.light-mode .btn-danger:hover {
        background: linear-gradient(to right, #1877f2, #dc3545);
    }

/* === DARK MODE === */
body.dark-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #3a3b3c); /* red + dark gray */
}

    body.dark-mode .btn-danger:hover {
        background: linear-gradient(to right, #3a3b3c, #dc3545);
    }

/* === NATURE MODE === */
body.nature-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #118088); /* red + green-teal */
}

    body.nature-mode .btn-danger:hover {
        background: linear-gradient(to right, #118088, #dc3545);
    }

/* === SEA MODE === */
body.sea-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #00b4d8); /* red + aqua blue */
}

    body.sea-mode .btn-danger:hover {
        background: linear-gradient(to right, #00b4d8, #dc3545);
    }

/* === MARS MODE === */
body.mars-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #802f2f); /* red + dark red rock */
}

    body.mars-mode .btn-danger:hover {
        background: linear-gradient(to right, #802f2f, #dc3545);
    }

/* === SUN MODE === */
body.sun-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #f57f17); /* red + sun orange */
}

    body.sun-mode .btn-danger:hover {
        background: linear-gradient(to right, #f57f17, #dc3545);
    }

/* === SHADOW MODE === */
body.shadow-mode .btn-danger {
    background: linear-gradient(to right, #dc3545, #7c7f82); /* red + neutral gray */
}

    body.shadow-mode .btn-danger:hover {
        background: linear-gradient(to right, #7c7f82, #dc3545);
    }
.modal-theme-dark .modal-content {
    background-color: #2c2c2c;
    color: #e5e7eb;
}

.modal-theme-light .modal-content {
    background-color: #ffffff;
    color: #1c1e21;
}

.modal-theme-nature .modal-content {
    background-color: #eafaf2;
    color: #0e2f2f;
}

.modal-theme-sea .modal-content {
    background-color: #e5faff;
    color: #083c4c;
}

.modal-theme-mars .modal-content {
    background-color: #3c2a2a;
    color: #ffdbc2;
}

.modal-theme-sun .modal-content {
    background-color: #fffdf3;
    color: #5a3e00;
}

.modal-theme-shadow .modal-content {
    background-color: #f0f0f2;
    color: #2d2f31;
}
/* === DARK MODE === */
body.dark-mode .btn-close {
    filter: invert(1);
}

/* === LIGHT MODE === */
body.light-mode .btn-close {
    filter: none;
}

/* === NATURE MODE === */
body.nature-mode .btn-close {
    filter: brightness(0.3) saturate(3);
}

/* === SEA MODE === */
body.sea-mode .btn-close {
    filter: brightness(0.3) saturate(2.5);
}

/* === MARS MODE === */
body.mars-mode .btn-close {
    filter: invert(0.9) sepia(1) hue-rotate(-10deg);
}

/* === SUN MODE === */
body.sun-mode .btn-close {
    filter: brightness(0.6) sepia(0.8);
}

/* === SHADOW MODE === */
body.shadow-mode .btn-close {
    filter: brightness(0.4) grayscale(0.3);
}


#yearSelect {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 1rem;
    font-family: Rubik, sans-serif;
    background-color: #1a1a1a;
    color: #e5e7eb;
    border: 1px solid #444;
    transition: background-color 0.3s, color 0.3s;
}
body.light-mode #yearSelect {
    background-color: #ffffff;
    color: #050505;
    border: 1px solid #ccd0d5;
}
body.nature-mode #yearSelect {
    background-color: #f0fbf7;
    color: #0e2f2f;
    border: 1px solid #9cd8c1;
}
body.sea-mode #yearSelect {
    background-color: #f0fcff;
    color: #083c4c;
    border: 1px solid #9fd8e0;
}
body.mars-mode #yearSelect {
    background-color: #3c2a2a;
    color: #ffdbc2;
    border: 1px solid #a65a4a;
}
body.sun-mode #yearSelect {
    background-color: #fffef7;
    color: #5a3e00;
    border: 1px solid #ffcd70;
}
body.shadow-mode #yearSelect {
    background-color: #f8f9fa;
    color: #2d2f31;
    border: 1px solid #bbb;
}