/* Light theme styles */
html[data-theme='dark'] {
    body {
        background-color: var(--bg-theme-dark);
        color: #efefef;
    }

    .table-hover tbody tr:hover {
        background-color: #343a40 !important;
        /* Dark background */
        color: #ffffff !important;
        /* Light text */
    }

    .table {
        --bs-table-color: #d8d8d8;
        --bs-table-hover-color: #ffffff;
        --bs-table-bg: var(--bg-theme-dark);
        --bs-table-border-color: transparent;
    }

    /* Dark mode pagination adjustments */
    .dataTables_wrapper .pagination .page-item .page-link {
        background-color: #343a40;
        color: #f8f9fa;
        border-color: #495057;
    }

    .dataTables_wrapper .pagination .page-item.active .page-link {
        background-color: #007bff;
        color: #fff !important;
        border-color: #007bff;
    }

    .dataTables_wrapper .pagination .page-item.disabled .page-link {
        background-color: #212529;
        color: #6c757d;
        border-color: #495057;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background-color: transparent;
        filter: invert(1);
        /* Ensures white icon */
    }

    input:focus::placeholder {
        color: rgb(92, 92, 92) !important;
    }

    textarea {
        background-color: var(--background-color);
        color: var(--font-color);
    }

    textarea:focus {
        background-color: var(--background-color);
        color: var(--font-color);
        outline: none;
        border: 1px solid #ccc;
    }

    .badge.bg-warning {
        background-color: #ffc107;
        color: #212529;
        /* Dark text for warning badge */
    }

    --black-white: var(--black);

    --sidebar-font: var(--sidebar-light-font);
    --font-color: var(--font-light);
    --font-color-opp: var(--font-dark);
    --font-color-hover: var(--light5);
    --background-color: var(--bg-theme-dark);
    --sidebar-background: var(--bg-theme-dark-sidebar);
    --bg-shade-1: var(--dark8-5);
    --bg-shade-2: var(--dark6);
    --bg-checkered: var(--bg-checkered-dark);

    --border-color: var(--dark8);
    --icon-bg: var(--dark7);
    --shadow-color: var(--dark8);
    --scrollbar-thumb-color: var(--scrollbar-thumb-dark-theme);
    --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-dark-theme);
}

/* Dark theme styles */
html[data-theme='light'] {
    body {
        background-color: #fdfdfd;
        color: #1e2229;
    }

    .sidebar-content {
        border-right: 1px solid var(--border-color);
    }

    .dark-theme .sidebar-footer {
        background: linear-gradient(to top, #dcdcdc, #e6e6e6, #ffffff00);
        border-top: 1px solid var(--light3);
        border-right: 1px solid var(--border-color);
    }

    .t2icard {
        border: 1px solid var(--border-color);
    }

    .dataTables_wrapper .pagination .page-item.active .page-link {
        background-color: #007bff;
        color: #fff !important;
        border-color: #007bff;
    }

    --black-white: var(--white);

    --sidebar-font: var(--sidebar-dark-font);
    --font-color: var(--font-dark);
    --font-color-hover: var(--font-black);
    --font-color-opp: var(--font-light);
    --background-color: var(--bg-theme-light);
    --background-color-hover: var(--light5);
    --sidebar-background: var(--bg-theme-light-sidebar);
    --bg-shade-1: var(--bg-shade-1-light);
    --bg-shade-2: var(--light3);
    --bg-checkered: var(--bg-checkered-light);

    --border-color: var(--light3);
    --icon-bg: var(--light3);
    --shadow-color: var(--dark1);
    --scrollbar-thumb-color: var(--scrollbar-thumb-light-theme);
    --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-light-theme);
}



html[data-sidebar="show"] {

    .sidebar-wrapper {
        left: 0px;
    }

    .top-nav-brand {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .page-wrapper.toggled #show-sidebar {
        left: -40px;
    }

    @media screen and (min-width: 1100px) {
        .page-wrapper.toggled .page-content {
            padding-left: 250px;
        }
    }
}

html[data-sidebar="hide"] {
    .sidebar-wrapper {
        left: -300px;
    }

    @media screen and (min-width: 1100px) {
        .page-wrapper.toggled .page-content {
            padding-left: 0px;
        }
    }
}