/* Dark Mode Overrides for Revox/Pages Template */

body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Layout Elements */
body.dark-mode .page-container {
    background-color: #121212 !important;
}

body.dark-mode .header {
    background-color: #000000 !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .header div.brand,
body.dark-mode .sidebar-header,
body.dark-mode .sidebar-header .brand,
body.dark-mode .header .brand {
    background-color: #000000 !important;
}

/* If logo has baked-in white background, try to invert it or at least ensure container is black */
body.dark-mode .brand img {
    background-color: transparent !important;
}

body.dark-mode .page-sidebar {
    background-color: #000000 !important;
}

body.dark-mode .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu {
    background-color: #000000 !important;
}

body.dark-mode .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li > a {
    background-color: #000000 !important;
}

body.dark-mode .content {
    background-color: #121212 !important;
}

/* Sidebar Menu */
body.dark-mode .page-sidebar .sidebar-menu .menu-items > li > a {
    color: #b0b0b0 !important;
}

body.dark-mode .page-sidebar .sidebar-menu .menu-items > li:hover > a,
body.dark-mode .page-sidebar .sidebar-menu .menu-items > li.open > a,
body.dark-mode .page-sidebar .sidebar-menu .menu-items > li.active > a {
    color: #ffffff !important;
}

body.dark-mode .icon-thumbnail {
    background-color: #2b2b2b !important;
    color: #b0b0b0 !important;
}

/* Tables and manual background overrides */
body.dark-mode .table,
body.dark-mode table,
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:white"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode .bg-white,
body.dark-mode .tab-content,
body.dark-mode .wizard-footer,
body.dark-mode .bg-master-light,
body.dark-mode .bg-master-lighter {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .tab-content {
    border: 1px solid #333 !important;
}

body.dark-mode .nav-tabs {
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .nav-tabs li a {
    background-color: #252525 !important;
    color: #b0b0b0 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .nav-tabs li.active a,
body.dark-mode .nav-tabs li a.active {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-bottom-color: #1e1e1e !important;
}

body.dark-mode .wizard-steps {
    background-color: #252525 !important;
}

body.dark-mode .wizard-steps li {
    background-color: #252525 !important;
}

body.dark-mode .wizard-steps li.active {
    background-color: #333 !important;
}

body.dark-mode .wizard-steps li .step {
    background-color: #444 !important;
    color: #fff !important;
}

body.dark-mode .wizard-steps li.active .step {
    background-color: #6d5cae !important;
}

body.dark-mode .table tr,
body.dark-mode table tr,
body.dark-mode .table tr td,
body.dark-mode table tr td,
body.dark-mode .table tr th,
body.dark-mode table tr th,
body.dark-mode table.table tbody tr td {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

/* Override for manually colored cells/rows and generic style attributes */
body.dark-mode table tr[style*="background"],
body.dark-mode table td[style*="background"],
body.dark-mode table th[style*="background"],
body.dark-mode .table tr[style*="background"],
body.dark-mode .table td[style*="background"],
body.dark-mode .table th[style*="background"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252525 !important;
}

body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover td {
    background-color: #2b2b2b !important;
}

/* DataTables Specific */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #e0e0e0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter {
    color: #b0b0b0 !important;
}

/* Cards and Panels */
body.dark-mode .card,
body.dark-mode .panel {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .card-header,
body.dark-mode .panel-heading {
    background-color: #252525 !important;
    border-bottom: 1px solid #333 !important;
    color: #ffffff !important;
}

body.dark-mode .card-title {
    color: #ffffff !important;
}

/* Typography Overrides */
body.dark-mode .text-master,
body.dark-mode .semi-bold,
body.dark-mode .bold,
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: #ffffff !important;
}

body.dark-mode .hint-text,
body.dark-mode .muted,
body.dark-mode p,
body.dark-mode span:not(.label):not(.badge) {
    color: #b0b0b0 !important;
}

/* Forms */
body.dark-mode .form-control {
    background-color: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-control:focus {
    border-color: #6d5cae !important; /* Pages primary color */
}

body.dark-mode .form-group-default {
    background-color: #2b2b2b !important;
    border: 1px solid #444 !important;
}

body.dark-mode .form-group-default label {
    color: #888 !important;
}

body.dark-mode .form-group-default.focus {
    border-color: #6d5cae !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .modal-header {
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .modal-footer {
    border-top: 1px solid #333 !important;
}

/* Tables */
body.dark-mode table.table thead th {
    background-color: #252525 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #333 !important;
}

body.dark-mode table.table tbody td {
    border-bottom: 1px solid #333 !important;
    color: #b0b0b0 !important;
}

body.dark-mode table.table-hover tbody tr:hover td {
    background-color: #2a2a2a !important;
}

/* DataTables Specifics */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #b0b0b0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #333 !important;
    border: 1px solid #444 !important;
}

/* Select2 Specifics */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #2b2b2b !important;
    border: 1px solid #444 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e0e0 !important;
}

body.dark-mode .select2-dropdown {
    background-color: #1e1e1e !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field,
body.dark-mode .select2-container--default .select2-search--inline .select2-search__field,
body.dark-mode .select2-search input {
    background-color: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #333 !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6d5cae !important;
    color: #ffffff !important;
}

body.dark-mode .select2-results__option {
    color: #b0b0b0 !important;
}

/* Miscellaneous Overrides */
body.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}

body.dark-mode .bg-master-lighter,
body.dark-mode .bg-master-lightest {
    background-color: #252525 !important;
}

body.dark-mode .b-grey {
    border-color: #333 !important;
}

body.dark-mode .dropdown-menu {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}

body.dark-mode .dropdown-item {
    color: #b0b0b0 !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .profile-dropdown .dropdown-item i {
    color: #b0b0b0 !important;
}

/* Fix for specific Pages elements */
body.dark-mode .breadcrumb li a,
body.dark-mode .breadcrumb li span {
    color: #888 !important;
}

body.dark-mode .breadcrumb li.active {
    color: #e0e0e0 !important;
}

/* Portlets */
body.dark-mode .card.card-default {
    border: 1px solid #333 !important;
}

/* Parallax (Dashboard Header) */
body.dark-mode .parallax {
    background-color: #1a1a1a !important;
}

/* Login Page */
body.dark-mode .login-wrapper {
    background-color: #000000 !important;
}

body.dark-mode .login-container {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .login-wrapper .bg-pic img {
    opacity: 0.7; /* Dim the background image in dark mode */
}

body.dark-mode .login-container a.btn-white {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

body.dark-mode .login-container a.btn-white:hover {
    background-color: #333 !important;
}

/* Modals Refined */
body.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal .modal-header,
body.dark-mode .modal.fade.fill-in .modal-content .modal-header,
body.dark-mode .modal.fade.stick-up .modal-content .modal-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
    color: #ffffff !important;
}

body.dark-mode .modal-header h1,
body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .modal-header h4,
body.dark-mode .modal-header h5,
body.dark-mode .modal-header .semi-bold,
body.dark-mode .modal-title {
    color: #ffffff !important;
}

body.dark-mode .modal-header .close,
body.dark-mode .modal-header .pg-close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}

body.dark-mode .modal-body,
body.dark-mode .modal.fade.slide-up .modal-body,
body.dark-mode .modal.fade.fill-in .modal-body {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .modal-footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333 !important;
}

/* Scrollbars - Global */
body.dark-mode *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode *::-webkit-scrollbar-track {
    background: #121212 !important;
}

body.dark-mode *::-webkit-scrollbar-thumb {
    background: #333 !important;
    border-radius: 5px;
}

body.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #444 !important;
}

/* jquery.scrollbar plugin overrides */
body.dark-mode .scroll-element,
body.dark-mode .scroll-element .scroll-element_track,
body.dark-mode .scroll-element .scroll-element_outer,
body.dark-mode .scrollbar-inner > .scroll-element .scroll-element_track,
body.dark-mode .scrollbar-outer > .scroll-element .scroll-element_track {
    background-color: #1a1a1a !important;
    border: none !important;
}

body.dark-mode .scroll-element .scroll-bar,
body.dark-mode .scrollbar-inner > .scroll-element .scroll-bar,
body.dark-mode .scrollbar-outer > .scroll-element .scroll-bar {
    background-color: #444 !important;
    opacity: 0.6 !important;
}

body.dark-mode .scroll-element:hover .scroll-bar,
body.dark-mode .scroll-element.scroll-draggable .scroll-bar {
    background-color: #555 !important;
    opacity: 1 !important;
}

body.dark-mode .scrollbar-outer > .scroll-element {
    background-color: #121212 !important;
}