:root {
    /* Brand Colors */
    --bs-primary: #4F46E5;
    --bs-secondary: #374151;
    /* Backgrounds & Text */
    --bg: #f6f7fb;
    --bg-soft: #ffffff;
    --text: #0f1222;
    --text-light: #ffffff;
    --muted: #4b5563;
    --muted-light: #f1f1f3;
    --card-border: rgba(15, 18, 34, 0.08);
    --gray-border: #dee2e6;
    --accent: #4F46E5;
    --success: #00894C;
    --danger: #a10000;
    --warning: #D97706;
    --badge-bg: #f1f5f9;
    /* Gradient Background */
    --gradient: linear-gradient(rgba(99, 102, 241, 0.18) 0%, rgba(248, 245, 255, 0.4) 57.73%, #fff 100%);
    --light-purple: #F0E9FF;
    --light-green: #DCFCE7;
    --light-cyan: #CFFAFE;
    --light-red: #FEE2E2;
    /* Dark Variants */
    --dark-purple: #3c00c8;
    --dark-green: #166534;
    --dark-cyan: #00698f;
    --bg-red: #FFE9E9;
    --bg-gray: #e2e3e5;
    /* scroll track bg */
    --sc-track: #a7a3c0;
}

html[data-theme="dark"] {
    --bg: #0b0f1a;
    --bg-soft: #1f2937;
    --text: #ffffff;
    --text-light: #020202;
    --bg-dark: #111827;
    /* Almost white */
    --muted: #9CA3AF;
    --muted-light: #f1f1f349;
    /* Gray-400 */
    --card-border: rgba(255, 255, 255, 0.2);
    --gray-border: #dee2e642;
    /* Accent */
    --accent: #818CF8;
    --success: #10B981;
    --danger: #F87171;
    --warning: #FBBF24;
    --badge-bg: rgba(255, 255, 255, 0.08);
    /* Gradients */
    --gradient: radial-gradient(1200px 600px at -10% -10%, rgba(129, 140, 248, .18), transparent 50%), radial-gradient(900px 600px at 110% -20%, rgba(16, 185, 129, .15), transparent 50%), linear-gradient(180deg, #0b0f1a 0%, #111827 100%);
    /* Light backgrounds (faded) */
    --light-purple: rgba(129, 140, 248, 0.15);
    --light-green: rgba(16, 185, 129, 0.15);
    --light-cyan: rgba(34, 211, 238, 0.15);
    --light-red: rgba(248, 113, 113, 0.15);
    /* Dark Variants */
    --dark-purple: #aaa3ff;
    --dark-green: #4effc8;
    --dark-cyan: #00beee;
    --danger: #ffb3b3;
    --bg-gray: #e2e3e524;
    --bs-border-color: #cedeed2b;
    /* scroll track bg */
    --sc-track: #36333f;
}



    /* ============================= */
    /* accordion        */
    /* ============================= */
    html[data-theme="dark"] .accordion-button::after {
        filter: invert(1) grayscale(100%);
        /* Invert and grayscale for a white arrow */
    }

html[data-theme=dark] .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

/*html[data-theme=dark] .form-select {
    filter: invert(1) grayscale(100%);
    color: white !important;
}*/



/* ============================= */
/* Background Utilities          */
/* ============================= */
.m-bg-purple {
    background-color: var(--light-purple);
    color: var(--dark-purple);
}

.m-bg-dark-purple {
    background-color: var(--dark-purple);
    color: var(--text-light);
}

.m-bg-green {
    background-color: var(--light-green);
    color: var(--dark-green);
}

.m-bg-cyan {
    background-color: var(--light-cyan);
    color: var(--dark-cyan);
}

.m-bg-light-red {
    background-color: var(--light-red);
    color: var(--danger);
}

.m-bg {
    background-color: var(--bg);
    color: var(--text);
}

.m-bg-gray {
    background-color: var(--bg-gray);
    color: var(--text);
}

.bg-soft {
    background-color: var(--bg-soft) !important;
}

.border-top {
    border-top: 1px solid var(--gray-border) !important;
}


/* card green */
.card-bg-green {
    background-color: var(--light-green);
    color: var(--dark-green);
}

    .card-bg-green .badge {
        background-color: var(--dark-green);
        color: var(--text-light);
    }

    .card-bg-green .m-dashHero-icon {
        background: var(--success);
        color: #fff;
    }

/* card red */
.card-bg-red {
    background-color: var(--light-red);
    color: var(--danger);
}

    .card-bg-red .badge {
        background-color: var(--danger);
        color: var(--text-light);
    }

    .card-bg-red .m-dashHero-icon {
        background: var(--danger);
        color: #fff;
    }

/* card cyan */
.card-bg-cyan {
    background-color: var(--light-cyan);
    color: var(--dark-cyan);
}

    .card-bg-cyan .badge {
        background-color: var(--dark-cyan);
        color: var(--text-light);
    }

    .card-bg-cyan .m-dashHero-icon {
        background: var(--dark-cyan);
        color: #fff;
    }


/* ============================= */
/* text color         */
/* ============================= */

.m-text-muted {
    color: var(--muted) !important;
}

.m-text-dark-purple {
    color: var(--dark-purple) !important;
}

.sunlight {
    color: #f90 !important;
}

.darkThem {
    color: var(--dark-purple) !important;
}

.text-success {
    color: #007b42 !important;
}

/* ============================= */
/* Buttons/links                      */
/* ============================= */
a {
    color: var(--dark-purple);
}

    a:hover {
        color: var(--accent) !important;
        text-decoration: none;
    }

.m-btn-outline-primary {
    color: var(--dark-purple);
    border-color: var(--dark-purple);
}

    .m-btn-outline-primary:hover {
        color: var(--bs-btn-hover-color) !important;
        background-color: var(--dark-purple);
        border-color: var(--dark-purple);
    }

.m-btn-outline-soft {
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text);
}

    .m-btn-outline-soft:hover {
        background: var(--badge-bg);
    }

.btn-primary {
    background-color: #3C00C8;
    border-color: #3C00C8
}

    .btn-primary:hover {
        background-color: #4700ee;
        border-color: #3C00C8;
        color: #fff !important;
    }


/* ============================= */
/* input form */
/* ============================= */
.form-select {
    color: var(--text);
}

    .form-select option {
        background-color: var(--bg-soft);
        color: var(--text);
    }

.m-search-input::placeholder {
    color: var(--muted);
}

.input-group-text {
    color: #777777eb;
}

/*.table_custom {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
}*/

/* table*/
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
}

/* modal properties */
[data-theme="dark"] .btn-close {
    filter: var(--bs-btn-close-white-filter);
}


.m-bg-input .form-control,
.m-bg-input .input-group-text {
    background-color: var(--bg-soft) !important;
    color: var(--text) !important;
}

    .m-bg-input .form-control::placeholder {
        color: var(--text) !important;
    }