:root {
/*     Light Mode Variables 
*/    --background-light: #f4f7fa;
    --text-light: #333;
    --card-light: #ffffff;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --border-light: #ccc;
     /*Dark Mode Variables*/ 
    --background-dark: #121212;
    --text-dark: #ffffff;
    --card-dark: #1e1e1e;
    --shadow-dark: rgba(255, 255, 255, 0.1);
    --border-dark: #444;
    --hover-dark: #2a2a2a;
     /*Primary Colors */
    --primary-color: #3498db;
    --hover-primary: #2980b9;
    --secondary-color: #2c3e50;
}

/*:root {*/
    /* Dark Mode Variables */
    /*--background-dark: #121212;*/ /* Consistent background for body and cards */
    /*--text-dark: #e0e0e0;*/ /* Soft white for text */
    /*--card-dark: #121212;*/ /* Same as background for consistency */
    /*--shadow-dark: rgba(0, 0, 0, 0.5);*/ /* Shadow for depth */
    /*--border-dark: #333333;*/ /* Subtle border color */
    /*--hover-dark: #2a2a2a;*/ /* Hover state for interactive elements */
    /* Header and Footer Colors */
    /*--header-footer-dark: #1e1e1e;*/ /* Slightly lighter than background for header/footer */
    /*--header-footer-text: #e0e0e0;*/ /* Text color for header/footer */
    /* Primary Colors */
    /*--primary-color: #3498db;*/ /* Bright, professional blue */
    /*--hover-primary: #2980b9;*/ /* Slightly darker blue for hover states */
    /*--secondary-color: #2c3e50;*/ /* Dark blue-gray for secondary elements */
    /* Accent Colors */
    /*--accent-color: #4CAF50;*/ /* Green for success or call-to-action */
    /*--error-color: #e74c3c;*/ /* Red for errors or warnings */
    /*--warning-color: #f1c40f;*/ /* Yellow for warnings */
    /*--info-color: #3498db;*/ /* Blue for informational messages */
/*}*/
/* Default Light Mode Styles */
body {
    font-family: Arial, sans-serif;
    background-color: var(--background-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
}
    /* Dark Mode for Specific Classes */
    body.dark-mode .form-card,
    body.dark-mode .card,
    body.dark-mode .select2,
    body.dark-mode .container,
    body.dark-mode .row,
    body.dark-mode .text-start,
    body.dark-mode .modal-body,
    body.dark-mode .modal-footer,
    body.dark-mode .table-responsive,
    body.dark-mode .tox-tinymce,
    body.dark-mode .col-md-2,
    body.dark-mode .use-case-darkmode,
    body.dark-mode .form-group,
    body.dark-mode .search-container,
    body.dark-mode .form-select,
    body.dark-mode .tox-editor-container,
    body.dark-mode .DataTable,
    body.dark-mode .select2-selection__rendered,
    body.dark-mode .select2-selection--multiple,
    body.dark-mode .custom-search-field,
    body.dark-mode .select2-selection,
    body.dark-mode .select2-search__field,
    body.dark-mode .tox-editor-header,
    body.dark-mode .tox,
    body.dark-mode .footer,
    body.dark-mode .close,
    body.dark-mode .module-columns,
    body.dark-mode .tox-edit-focus,
    body.dark-mode .modal.fade .modal-content {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }

    body.dark-mode #formContainer {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }
    /* Dark Mode Styles */
    body.dark-mode {
        background-color: var(--background-dark);
        color: var(--text-dark);
    }

        /* Ensure all text in dark mode is white */
        body.dark-mode * {
            color: var(--text-dark) !important;
        }

        /* Form Fields & Select2 Dropdown */
        /*body.dark-mode .form-control,
        body.dark-mode .form-select,
        body.dark-mode .select2-container .select2-selection--single {
            background-color: var(--card-dark) !important;
            color: var(--text-dark) !important;
            border-color: var(--border-dark) !important;
        }*/

            /* Placeholder Color */
            body.dark-mode .form-control::placeholder,
            body.dark-mode .form-select::placeholder {
                color: rgba(255, 255, 255, 0.5) !important;
            }

        /* Dropdown & Select2 Styling */
        body.dark-mode .select2-dropdown {
            background-color: var(--card-dark) !important;
            border-color: var(--border-dark) !important;
        }

        body.dark-mode .select2-results__option {
            background-color: var(--card-dark) !important;
            color: var(--text-dark) !important;
        }

        body.dark-mode .select2-results__option--highlighted {
            background-color: var(--hover-dark) !important;
            color: var(--text-dark) !important;
        }

        /* Buttons in Dark Mode */
        body.dark-mode .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }

            body.dark-mode .btn-primary:hover {
                background-color: var(--hover-primary) !important;
                border-color: var(--hover-primary) !important;
            }

        /* DataTable Styling */
        body.dark-mode .DataTable {
            background-color: var(--card-dark) !important;
            color: var(--text-dark) !important;
        }

            body.dark-mode .DataTable th,
            body.dark-mode .DataTable td {
                border-color: var(--border-dark) !important;
            }

            body.dark-mode .DataTable tr:hover {
                background-color: var(--hover-dark) !important;
            }

        /* Modals */
        body.dark-mode .modal-content {
            background-color: var(--card-dark) !important;
            color: var(--text-dark) !important;
            border-color: var(--border-dark) !important;
        }

/* Headings in Dark Mode */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-light); /* Dark for light mode */
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-dark) !important;
}

/* Images & Use Case (Remains White) */
body.dark-mode img,
body.dark-mode .usecase,
body.dark-mode textarea {
    background-color: var(--card-light) !important;
    color: var(--text-light) !important;
}

/* Hover Effects */
body.dark-mode a:hover,
body.dark-mode .btn:hover {
    background-color: var(--hover-dark) !important;
}

body.dark-mode .DataTable tr:hover {
    background-color: var(--hover-dark) !important;
    color: var(--text-dark) !important;
}

/* Search Container */
body.dark-mode .search-container {
    background-color: var(--card-dark) !important;
    border-color: var(--border-dark) !important;
}


body.dark-mode .tox-toolbar,
body.dark-mode .tox-menu,
body.dark-mode .tox-dialog {
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .tox-tbtn {
    color: var(--text-dark) !important;
}

    body.dark-mode .tox-tbtn:hover {
        background-color: var(--hover-dark) !important;
    }
.dark-mode #interviewQuestionsTable tbody tr:hover {
    background-color: #29213c; /* Soft dark gray */
    transition: background-color 0.3s ease;
}
/* Dark Mode Styles for the Table and Dropdowns */
body.dark-mode .search-container {
    background-color: var(--card-dark) !important;
    border-color: var(--border-dark) !important;
}

body.dark-mode .search-box .form-control,
body.dark-mode .search-box .form-select {
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}


/* Dark Mode Overrides */
body.dark-mode {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text */
}

    /* Dark Mode for Dropdowns (Select2) */
    body.dark-mode .select2-container .select2-selection--single {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
        border-color: #444 !important; /* Dark border */
    }

    body.dark-mode .select2-container .select2-selection__rendered {
        color: #ffffff !important; /* Light text */
    }

    body.dark-mode .select2-dropdown {
        background-color: #1e1e1e !important; /* Dark gray */
        border-color: #444 !important; /* Dark border */
    }

    body.dark-mode .select2-results__option {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
    }

    body.dark-mode .select2-results__option--highlighted {
        background-color: #2a2a2a !important; /* Slightly lighter gray for hover */
        color: #ffffff !important; /* Light text */
    }

    body.dark-mode .select2-search--dropdown .select2-search__field {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
        border-color: #444 !important; /* Dark border */
    }

        body.dark-mode .select2-search--dropdown .select2-search__field::placeholder {
            color: rgba(255, 255, 255, 0.5) !important; /* Light gray placeholder */
        }

    /* Dark Mode for Table */
    body.dark-mode .table {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
    }

        body.dark-mode .table thead th {
            background-color: #2c3e50 !important; /* Dark blue-gray */
            color: #ffffff !important; /* Light text */
        }

        body.dark-mode .table tbody td {
            background-color: #1e1e1e !important; /* Dark gray */
            color: #ffffff !important; /* Light text */
        }

    body.dark-mode .table-hover tbody tr:hover {
        background-color: #2a2a2a !important; /* Slightly lighter gray for hover */
        color: #ffffff !important; /* Light text */
    }

    /* Dark Mode for Buttons */
    body.dark-mode .btn-primary {
        background-color: #3498db !important; /* Primary color */
        border-color: #3498db !important; /* Primary color */
        color: #ffffff !important; /* Light text */
    }

        body.dark-mode .btn-primary:hover {
            background-color: #2980b9 !important; /* Darker primary color */
            border-color: #2980b9 !important; /* Darker primary color */
        }

    /* Dark Mode for Links */
    /*body.dark-mode a.text-primary {
        color: #3498db !important;*/ /* Primary color */
    /*}*/

        body.dark-mode a.text-primary:hover {
            color: #2980b9 !important; /* Darker primary color */
        }

    /* Dark Mode for Alerts */
    body.dark-mode .alert-success {
        background-color: #28a745 !important; /* Green */
        color: #ffffff !important; /* Light text */
    }

    body.dark-mode .alert-warning {
        background-color: #ffc107 !important; /* Yellow */
        color: #121212 !important; /* Dark text */
    }

    /* Dark Mode for Modal */
    body.dark-mode .modal-content {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
        border-color: #444 !important; /* Dark border */
    }

    body.dark-mode .modal-header {
        color: #ffffff !important; /* Light text */
    }

    body.dark-mode .modal-message {
        color: #ffffff !important; /* Light text */
    }

    /* Dark Mode for Pagination */
    body.dark-mode .dataTables_paginate .paginate_button {
        color: white !important;
    }
    /* Dark Mode for DataTables Pagination Buttons */
  
        body.dark-mode .dataTables_paginate .paginate_button:hover {
            background-color: floralwhite !important; /* Darker primary color */
            border-color: #2980b9 !important; /* Darker primary color */
            color: white !important; /* White text on hover */
        }

    /* Dark Mode for Action Buttons */
    body.dark-mode .action-btn.btn-warning {
        background-color: #f0ad4e !important; /* Warning color */
        color: #121212 !important; /* Dark text */
    }

        body.dark-mode .action-btn.btn-warning:hover {
            background-color: #ec971f !important; /* Darker warning color */
        }

    body.dark-mode .action-btn.btn-danger {
        background-color: #d9534f !important; /* Danger color */
        color: #ffffff !important; /* Light text */
    }

        body.dark-mode .action-btn.btn-danger:hover {
            background-color: #c9302c !important; /* Darker danger color */
        }

    /* Dark Mode for Search Icon */
    body.dark-mode .input-group-text {
        background-color: #1e1e1e !important; /* Dark gray */
        border-color: #444 !important; /* Dark border */
        color: #ffffff !important; /* Light text */
    }

    /* Dark Mode for DataTables */
    body.dark-mode .dataTables_wrapper .dataTables_filter input {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
        border-color: #444 !important; /* Dark border */
    }

    body.dark-mode .dataTables_wrapper .dataTables_length select {
        background-color: #1e1e1e !important; /* Dark gray */
        color: #ffffff !important; /* Light text */
        border-color: #444 !important; /* Dark border */
    }

    body.dark-mode .dataTables_info {
        color: #ffffff !important; /* Light text */
    }
    /* Dark Mode for Select2 Dropdown Options */
    body.dark-mode .select2-results__option {
        background-color: #1e1e1e !important; /* Dark gray background */
        color: #ffffff !important; /* Light text */
        transition: background-color 0.3s ease !important; /* Smooth hover transition */
    }

        /* Hover Effect for Select2 Dropdown Options */
        body.dark-mode .select2-results__option:hover {
            background-color: #2a2a2a !important; /* Slightly lighter gray for hover */
            color: #ffffff !important; /* Light text */
        }

    /* Highlighted Option (when selected or focused) */
    body.dark-mode .select2-results__option--highlighted {
        background-color: #2a2a2a !important; /* Slightly lighter gray */
        color: #ffffff !important; /* Light text */
    }
    

.tox-toolbar,
.tox-menubar,
.tox-statusbar {
    background-color: var(--card-light) !important; /* Light background */
    color: var(--text-light) !important; /* Dark text */
    border-color: var(--border-light) !important; /* Light border */
}

.tox-tbtn,
.tox-tbtn svg {
    color: var(--text-light) !important; /* Dark icons */
    fill: var(--text-light) !important; /* Dark icons */
}

.tox-tbtn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
}





body.dark-mode .tox-toolbar,
body.dark-mode .tox-menubar,
body.dark-mode .tox-statusbar {
    background-color: var(--card-dark) !important; /* Dark background */
    color: var(--text-dark) !important; /* Light text */
    border-color: var(--border-dark) !important; /* Dark border */
}

body.dark-mode .tox-tbtn,
body.dark-mode .tox-tbtn svg {
    color: var(--text-dark) !important; /* Light icons */
    fill: var(--text-dark) !important; /* Light icons */
}

body.dark-mode .tox-tbtn:hover {
    background-color: var(--hover-dark) !important; /* Dark hover effect */
}

body.dark-mode .tox-sidebar-wrap {
    background-color: var(--card-dark) !important; /* Dark background */
    color: var(--text-dark) !important; /* Light text */
}

body.dark-mode .tox-sidebar-wrap::placeholder {
    color: rgba(255, 255, 255, 0.5) !important; /* Light gray placeholder */
}

/* Light Mode for TinyMCE Sidebar Wrap (Editor Body) */
.tox-sidebar-wrap {
    background-color: var(--card-light) !important; /* Light background */
    color: var(--text-light) !important; /* Dark text */
    border-color: var(--border-light) !important; /* Light border */
}

.tox-toolbar__primary {
    background-color: var(--card-light) !important; /* Light background for toolbar */
}

.tox-tbtn,
.tox-tbtn svg {
    color: var(--text-light) !important; /* Dark icons for toolbar */
    fill: var(--text-light) !important; /* Dark icons for toolbar */
}


body.dark-mode .tox-sidebar-wrap {
    background-color: #000000 !important; /* Black background */
    color: #ffffff !important; /* White text */
}


body.dark-mode .tox-toolbar__primary {
    background-color: #000000 !important; /* Black background for toolbar */
}

body.dark-mode .tox-tbtn,
body.dark-mode .tox-tbtn svg {
    color: #ffffff !important; /* White icons for toolbar */
    fill: #ffffff !important; /* White icons for toolbar */
}

body.dark-mode .tox-edit-focus {
    outline: 2px solid var(--primary-color) !important; /* Focus outline in dark mode */
}

.tox-toolbar,
.tox-menubar,
.tox-statusbar {
    background-color: var(--card-light) !important; /* Light background */
    color: var(--text-light) !important; /* Dark text */
    border-color: var(--border-light) !important; /* Light border */
}

.tox-tbtn,
.tox-tbtn svg {
    color: var(--text-light) !important; /* Dark icons */
    fill: var(--text-light) !important; /* Dark icons */
}

    .tox-tbtn:hover {
        background-color: rgba(0, 0, 0, 0.1) !important; /* Light hover effect */
    }



body.dark-mode .tox-toolbar,
body.dark-mode .tox-menubar,
body.dark-mode .tox-statusbar {
    background-color: var(--card-dark) !important; /* Dark background */
    color: var(--text-dark) !important; /* Light text */
    border-color: var(--border-dark) !important; /* Dark border */
}

body.dark-mode .tox-tbtn,
body.dark-mode .tox-tbtn svg {
    color: var(--text-dark) !important; /* Light icons */
    fill: var(--text-dark) !important; /* Light icons */
}

    body.dark-mode .tox-tbtn:hover {
        background-color: var(--hover-dark) !important; /* Dark hover effect */
    }

    

body.dark-mode .tox-sidebar-wrap {
    background-color: var(--card-dark) !important; /* Dark background */
    color: var(--text-dark) !important; /* Light text */
}

body.dark-mode .tox-toolbar__primary {
    background-color: var(--card-dark) !important; /* Dark background for toolbar */
}

body.dark-mode .tox-edit-focus {
    outline: 2px solid var(--primary-color) !important; /* Focus outline in dark mode */
}


/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

    /* Dark Mode Placeholder Styles */
    body.dark-mode ::placeholder,
    body.dark-mode .form-control::placeholder,
    body.dark-mode .form-select::placeholder,
    body.dark-mode .select2-search__field::placeholder {
        color: rgba(255, 255, 255, 0.5) !important; /* White placeholder with 50% opacity */
    }

    /* Dark Mode Select2 Dropdown Placeholder */
    body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: rgba(255, 255, 255, 0.5) !important; /* White placeholder with 50% opacity */
    }

    /* Dark Mode for Input Fields and Select2 Dropdowns */
    body.dark-mode .form-control,
    body.dark-mode .form-select,
    body.dark-mode .select2-container .select2-selection--single {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }

    /* Dark Mode for Select2 Dropdown */
    body.dark-mode .select2-dropdown {
        background-color: var(--card-dark) !important;
        border-color: var(--border-dark) !important;
    }

    body.dark-mode .select2-results__option {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
    }

    body.dark-mode .select2-results__option--highlighted {
        background-color: var(--hover-dark) !important;
        color: var(--text-dark) !important;
    }

/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
}



    /* Dark Mode for Placeholder Text */
    body.dark-mode input::placeholder,
    body.dark-mode textarea::placeholder,
    body.dark-mode select::placeholder,
    body.dark-mode .form-control::placeholder,
    body.dark-mode .form-select::placeholder,
    body.dark-mode .select2-search__field::placeholder,
    body.dark-mode .search-box input::placeholder, /* Target search box specifically */
    body.dark-mode .input-group input::placeholder { /* Target input group specifically */
        color: white !important; /* White placeholder */
        opacity: 0.9; /* Adjust opacity if needed */
    }

    /* Dark Mode for Select2 Dropdown Placeholder */
    body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: white !important; /* White placeholder */
        opacity: 0.9; /* Adjust opacity if needed */
    }
    /* Dark Mode for TinyMCE Editor */
    body.dark-mode .tox-tinymce {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }

    body.dark-mode .tox-toolbar,
    body.dark-mode .tox-menubar,
    body.dark-mode .tox-statusbar {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }

    body.dark-mode .tox-tbtn,
    body.dark-mode .tox-tbtn svg {
        color: var(--text-dark) !important;
        fill: var(--text-dark) !important;
    }

        body.dark-mode .tox-tbtn:hover {
            background-color: var(--hover-dark) !important;
        }

    body.dark-mode .tox-edit-area {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
    }

        body.dark-mode .tox-edit-area::placeholder {
            color: rgba(255, 255, 255, 0.5) !important;
        }

    body.dark-mode .tox-sidebar-wrap {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
    }

    /* Dark Mode for File Input */
    body.dark-mode input[type="file"] {
        background-color: var(--card-dark) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-dark) !important;
    }

        body.dark-mode input[type="file"]::file-selector-button {
            background-color: var(--primary-color) !important;
            color: var(--text-dark) !important;
            border-color: var(--border-dark) !important;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

            body.dark-mode input[type="file"]::file-selector-button:hover {
                background-color: var(--hover-primary) !important;
            }


/* Ensure consistent sizing for table header and body */
table {
    width: 100%; /* Ensure the table takes full width */
}

    table thead th,
    table tbody td {
        padding: 12px; /* Consistent padding for header and body cells */
        text-align: left; /* Align text to the left */
        font-size: 16px; /* Consistent font size */
    }

/* Dark Mode for Table Header and Body */
body.dark-mode table thead th,
body.dark-mode table tbody td {
    border-color: var(--border-dark); /* Dark border for cells in dark mode */
    background-color: var(--card-dark); /* Dark background for cells */
    color: var(--text-dark); /* White text for cells */
}

/* Module Grid Specific Dark Mode Styles */
body.dark-mode .module-columns,
body.dark-mode .module-column,
body.dark-mode .module-item
{
    background-color: #000000 !important; /* Pure black */
    color: #ffffff !important;
    border-color: #333 !important;
}

    body.dark-mode .module-item:hover {
        background-color: #1a1a1a !important; /* Slightly lighter black for hover */
    }

body.dark-mode .module-index {
    color: #ff6b6b !important; /* Brighter red for better contrast */
}

body.dark-mode .module-link-icon {
    color: #aaa !important; /* Lighter gray for icons */
}

body.dark-mode .module-name {
    color: #ffffff !important;
}

body.dark-mode .form-check {
    background-color: #000000 !important; /* Pure black */
    color: #ffffff !important;
    border-color: #333 !important;
}
body.dark-mode .dropdown-menu {
    background-color: #000000 !important; /* Pure black */
    color: #ffffff !important;
    border-color: #333 !important;
}