/* =========================================
   Root Variables
========================================= */
:root {
    --primary: #222256;
    --secondary: #B3EC24;
    --white: #F5F6FC;
    --dark: #14141A;
}



[data-bs-theme=dark] .table-transparent thead,
[data-bs-theme=dark] .table-transparent tbody,
[data-bs-theme=dark] .table-transparent thead tr,
[data-bs-theme=dark] .table-transparent tbody tr,
[data-bs-theme=dark] .table-transparent thead tr td,
[data-bs-theme=dark] .table-transparent tbody tr td,
[data-bs-theme=dark] .table-transparent thead tr th,
[data-bs-theme=dark] .table-transparent tbody tr th {
    background-color: transparent !important;
}

[data-bs-theme=dark] td.datatable-td {
    background-color: transparent !important;
}

[data-bs-theme=dark] ul.navbar-nav.nav-right-links.align-items-center .user-profile {
    background-color: transparent !important;
    padding: 20px !important;
    line-height: 0px !important;
    height: 60px !important;
    border-radius: 2rem !important;
}


[data-bs-theme=dark] .dropdown-menu.dropdown-notify.dropdown-menu-end.shadow.show,
[data-bs-theme=dark] .dropdown-menu.dropdown-user.dropdown-menu-end.shadow.show {
    background-color: var(--dark) !important;
    box-shadow: 0px 3px 27px #dddddd6b !important;
}

[data-bs-theme=dark] .apexcharts-legend-text,
[data-bs-theme=dark] .apexcharts-xaxis-texts-g {
    color: #fff !important;
}

[data-bs-theme=dark] .table-container {
    width: 100% !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    background-color: #13181e !important;
    /* background: linear-gradient(to top right,
                    #1c1c1c 0%,
                    #9693933a 50%,
                    #96939357 100%) !important; */
    /* background: linear-gradient(to bottom right,
                    #ff000034 0%,
                    #9693933a 50%,
                    #96939357 100%) !important; */
    min-height: 410px !important;
    margin: 0px auto !important;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .custom-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -7.5px;
    margin-left: -7.5px;
}

[data-bs-theme=dark] .custom-card-col-5 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    padding: 0.25rem !important;
}

/* For medium screens (tablets) */
@media (max-width: 1700px) {
    [data-bs-theme=dark] .custom-card-col-5 {
        flex: 0 0 25% !important;
        /* 3 columns */
        max-width: 25% !important;
    }
}

/* For medium screens (tablets) */
@media (max-width: 1024px) {
    [data-bs-theme=dark] .custom-card-col-5 {
        flex: 0 0 33.33% !important;
        /* 3 columns */
        max-width: 33.33% !important;
    }
}

/* For medium screens (tablets) */
@media (max-width: 820px) {
    [data-bs-theme=dark] .custom-card-col-5 {
        flex: 0 0 50% !important;
        /* 3 columns */
        max-width: 50% !important;
    }
}

/* For small screens (mobiles) */

@media (max-width: 576px) {
    .bar-graph {
        rotate: 90deg !important;
        width: 100% !important;
        height: 100% !important;
        color: var(--white) !important;
    }

    [data-bs-theme=dark] .custom-card-col-5 {
        flex: 0 0 50% !important;
        /* 2 columns */
        max-width: 50% !important;
    }
}

/* For very small screens (extra small devices) */
@media (max-width: 430px) {
    .bar-graph {
        rotate: 90deg !important;
        width: 100% !important;
        height: 100% !important;
        color: var(--white) !important;
    }

    [data-bs-theme=dark] .custom-card-col-5 {
        flex: 0 0 100% !important;
        /* 1 column */
        max-width: 100% !important;
    }

    #sm-hide {
        display: none !important;
    }
}


.datatable-td {
    white-space: nowrap !important;
    font-weight: lighter !important;
    font-size: 0.78rem !important;
    padding: 0.58rem !important;
    text-transform: uppercase !important;
}

.datatable-th {
    text-transform: uppercase !important;
    white-space: nowrap !important;
    font-weight: bold !important;
    font-size: 0.78rem !important;
}

html[data-bs-theme="dark"] .card table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* =========================================
   Primary
========================================= */
html[data-bs-theme="dark"] .text-primary {
    color: var(--primary) !important;
}

html[data-bs-theme="dark"] .bg-primary {
    background-color: var(--primary) !important;
}

/* =========================================
   Secondary
========================================= */
html[data-bs-theme="dark"] .text-secondary {
    color: var(--secondary) !important;
}

html[data-bs-theme="dark"] .bg-secondary {
    background-color: var(--secondary) !important;
}

/* =========================================
   Ice White
========================================= */
html[data-bs-theme="dark"] .text-white {
    color: var(--white) !important;
}

html[data-bs-theme="dark"] .bg-white {
    background-color: var(--white) !important;
}

/* =========================================
   Dark
========================================= */
html[data-bs-theme="dark"] .text-dark {
    color: var(--dark) !important;
}

html[data-bs-theme="dark"] .bg-dark {
    background-color: var(--dark) !important;
}

.sidebar-header {
    height: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logo-img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-wrapper .sidebar-nav {
    margin-top: 0px !important;
}

.breadcrumb-title {
    border: none !important;
    outline: none !important;
}

.col-12.col-xl-5.col-xxl-4.auth-cover-right.align-items-center.justify-content-center {
    background-color: #212529 !important;
}


html[data-bs-theme="dark"] .btn-custom {
    background-color: var(--secondary) !important;
    border-radius: 3rem !important;
    border: none !important;
    outline: none !important;
    padding: 0.6rem 1.5rem 0.6rem 1.5rem !important;
    color: var(--dark) !important;
    font-weight: bold !important;
}

/* Base button styles */
html[data-bs-theme="dark"] .btn-custom-hover {
    background-color: transparent !important;
    border-radius: 3rem !important;
    border: var(--secondary) 2px solid !important;
    outline: none !important;
    padding: 0.6rem 1.5rem 0.6rem 1.5rem !important;
    color: var(--white) !important;
    font-weight: bold !important;
    transition: all 0.3s ease-in-out;
    /* Smooth transition for all properties */
    box-sizing: border-box;
    /* Ensures padding doesn't affect width/height */
}

html[data-bs-theme="dark"] .btn-custom-hover:hover {
    background-color: var(--secondary) !important;
    color: var(--dark) !important;
}

html[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_filter input {
    margin-left: .5em;
    display: inline-block;
    width: auto;
    margin-bottom: 10px !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    border: 0px solid #aaa !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    background-color: var(--dark) !important;
    color: var(--white) !important;
}


html[data-bs-theme="dark"] .card table thead tr th,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTable thead tr th {
    white-space: nowrap !important;
    background-color: var(--white);
    color: var(--dark);
    font-weight: bold !important;
    font-size: 0.78rem !important;
}

html[data-bs-theme="dark"] .card table thead tr td button,
html[data-bs-theme="dark"] .card table thead tr td a,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTable tbody tr td button,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTable tbody tr td a {
    background-color: var(--secondary) !important;
    color: var(--dark) !important;
    outline: none !important;
    border: none !important;
}

html[data-bs-theme="dark"] .card table thead tr td .btn-xs,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTable tbody tr td .btn-xs {
    background-color: none !important;
    color: var(--secondary) !important;
    outline: none !important;
    border: none !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTable tbody tr td {
    white-space: nowrap !important;
    background-color: #000 !important;
    align-content: center !important;
    text-align: center !important
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.active,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--secondary) !important;
    color: var(--dark);
    border: none !important;
    outline: none !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a {
    background-color: #00000000 !important;
    color: var(--dark);
    border: none !important;
    outline: none !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    /* box-sizing: border-box !important; */
    display: inline-block !important;
    min-width: 1.5em !important;
    padding: .5em 1em !important;
    background-color: var(--white) !important;
    margin-left: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: var(--dark) !important;
    /* border: 2px solid white !important; */
    border-radius: 2px !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .current {
    box-sizing: border-box !important;
    display: inline-block !important;
    min-width: 1.5em !important;
    padding: .5em 1em !important;
    margin-left: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: #000 !important;
    border: 2px solid white !important;
    border-radius: 2px !important;
    background-color: #fff !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:active,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    border: 1px solid #aaa !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    background-color: #fff !important;
    color: #000 !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    cursor: not-allowed !important;
    color: var(--white) !important;
    background-color: #7b816b !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a:active,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a:hover,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button a {
    border: none !important;
    outline: none !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    cursor: default;
    color: var(--dark) !important;
    background-color: var(--secondary) !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

/* Select2 */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    background-image: url("../img/select2/arrow-down.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    width: 100% !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    background-color: #212529 !important;
    border: 1px solid #495057 !important;
    border-radius: 0.25rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] {
    color: #fff !important;
    background-color: #0d6efd !important;
}

html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.35em 0.65em;
    margin-right: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    color: #ffffff;
    cursor: auto;
    border-radius: 0.25rem;
    background-color: #0d6efd;
}

html[data-bs-theme="dark"] .select2-selection__choice__remove {
    background-image: url("../img/select2/cross-symbol.svg") !important;
}

html[data-bs-theme="dark"] body {
    background: #000 !important;
    font-family: sans-serif !important;
}

/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; */
html[data-bs-theme="dark"] .card .card-header p,
html[data-bs-theme="dark"] .card .card-header h1,
html[data-bs-theme="dark"] .card .card-header h2,
html[data-bs-theme="dark"] .card .card-header h3,
html[data-bs-theme="dark"] .card .card-header h4,
html[data-bs-theme="dark"] .card .card-header h5,
html[data-bs-theme="dark"] .card .card-header h6 {
    color: var(--secondary) !important;
}

html[data-bs-theme="dark"] .card .card-header {
    padding: 0px 0px 5px 2px !important;
    border-bottom: none !important;
}

html[data-bs-theme="dark"] .card {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    background-color: #13181e !important;
    border: 0 !important;
    margin: 0px auto !important;
    overflow: hidden;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 0.5rem !important;
}


html[data-bs-theme="dark"] .table-container {
    width: 100% !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    background-color: #13181e !important;
    /* background: linear-gradient(to top right, #1c1c1c 0%, #9693933a 50%, #96939357 100%) !important; */
    min-height: 500px !important;
    margin: 0px auto !important;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme=dark] .table-condensed {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    color: #000000 !important;
}

[data-bs-theme=dark] .daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 8px;
    border-top: 1px solid #ddd;
    line-height: 12px;
    vertical-align: middle;
    color: #000;
}

[data-bs-theme=dark] .daterangepicker .drp-buttons .cancelBtn {
    color: #fff !important;
    background-color: rgb(143, 113, 99) !important;
}

[data-bs-theme=dark] .form-group input,
[data-bs-theme=dark] .form-group textarea {
    background-color: #00000000 !important;
    /* border-color: #00000000 !important; */
    border-radius: 0 !important;
    border-color: #c6e70e46 !important;
}

[data-bs-theme=dark] body .top-header .navbar {
    background-color: #000000 !important;
    height: 55px !important;
    position: fixed !important;
    left: 260px !important;
    right: 0 !important;
    top: 0 !important;
    padding: 0 1.5rem !important;
    z-index: 10 !important;
    transition: ease-out 0.3s !important;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.044), 0 2px 6px 0 rgba(0, 0, 0, 0.049) !important;
}


[data-bs-theme=dark] body .sidebar-wrapper {
    /* background: linear-gradient(to top right,
            #1a1a40 0%,
            #222256 50%,
            #2e2e80 100%) !important; */
    /* background-color: var(--primary) !important; */
    /* background: linear-gradient(to top right,
            #1d1d3d 0%,
            #222256 60%,
            #3c3c7a 100%) !important; */

    background-color: #000000 !important;

    background: transparent !important;
    border-radius: 20px !important;
    margin-top: 0px !important;
    border: 0px !important;
    outline: none !important;
}

[data-bs-theme=dark] body .sidebar-wrapper .sidebar-header {
    background-color: #000000 !important;
    border: 0px !important;
    outline: none !important
}

[data-bs-theme=dark] body .sidebar-wrapper .sidebar-nav {
    background-color: #000000 !important;
}

[data-bs-theme=dark] body .page-footer {
    background-color: #000000 !important;
    /* background: linear-gradient(to top right, #1c1c1c 0%, #252323 50%, #3b3b3b 100%) !important; */
    border-top: 0px !important;
}

[data-bs-theme="dark"] .metismenu li a {
    padding: 0.6rem 0rem 0.6rem 1rem !important;
    border-radius: 2rem !important;
    /* color: white !important; */
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
}

[data-bs-theme="dark"] .metismenu li:hover>a {
    background-color: var(--white) !important;
    transform: translateX(2px);
    color: var(--dark) !important;
    box-shadow: 0 4px 12px rgba(242, 56, 58, 0.3);
}

[data-bs-theme="dark"] .metismenu li:hover>a[href="#"] i {
    color: var(--dark) !important;
}

[data-bs-theme="dark"] .metismenu .mm-active>a,
[data-bs-theme="dark"] .metismenu .my-active>a {
    background-color: var(--white) !important;
    color: var(--dark) !important;
    box-shadow: 0 4px 12px rgba(242, 56, 58, 0.4);
}

[data-bs-theme=dark] body .sidebar-nav .metismenu ul {
    background-color: #353a3f00 !important;
    padding: 1rem !important;
    margin: -1rem 0rem -1.3rem 0.2rem !important;
    border-radius: 2rem !important
}

[data-bs-theme=dark] body .sidebar-nav .metismenu ul li a {
    padding: 0.7rem !important;
}

/* Submenu active item: no background, only icon color */
[data-bs-theme="dark"] .metismenu ul li.mm-active>a,
[data-bs-theme="dark"] .metismenu ul li.my-active>a {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Change ONLY the icon color */
[data-bs-theme="dark"] .metismenu ul li.mm-active>a,
[data-bs-theme="dark"] .metismenu ul li.my-active>a {
    color: var(--secondary) !important;
}

[data-bs-theme="dark"] .dashboard-card {
    height: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
    background-color: #13181e !important;
    margin: 0px auto !important;
    overflow: hidden;
    padding: 1rem;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075) !important;
    border: 0 !important;
}

[data-bs-theme="dark"] .main-wrapper .main-content {
    padding: 1rem !important;
    background-color: #0c111700 !important;
}

html[data-bs-theme="dark"] .iti--allow-dropdown {
    width: 100% !important;
}

html[data-bs-theme="dark"] .iti__divider {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    border-bottom: 0px solid #CCC !important;
}

html[data-bs-theme="dark"] .iti__country {
    padding: 5px 10px !important;
    outline: none !important;
    background: #000 !important;
}

html[data-bs-theme="dark"] .iti__country.iti__highlight {
    background-color: #e4c5c5 !important;
    color: black !important;
}

html[data-bs-theme="dark"] .iti__country.iti__active {
    background-color: #ffffff !important;
    color: black !important;
}

html[data-bs-theme="dark"] input[readonly],
html[data-bs-theme="dark"] input[disabled],
html[data-bs-theme="dark"] select[disabled] {
    cursor: not-allowed !important;
    background-color: #f0f0f009;
}