/*------------------------------------------------------------------
[Dark Mode Stylesheet]

Project:    Mikroot
Version:    1.0.0
Description: Dark mode overrides for Sneat Bootstrap template
-------------------------------------------------------------------*/

/* ===================================================================
   Root Variables Override
   =================================================================== */
.dark-style {
  --bs-body-bg: #232333;
  --bs-body-color: #c5c5d2;
  --bs-body-bg-rgb: 35, 35, 51;
  --bs-body-color-rgb: 197, 197, 210;
  --bs-border-color: #3b3b52;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-light: #2a2a3c;
  --bs-dark: #d5d5dc;
  --bs-dark-rgb: 213, 213, 220;
  --bs-light-rgb: 42, 42, 60;
  --bs-gray: rgba(255, 255, 255, 0.08);
  --bs-gray-dark: rgba(255, 255, 255, 0.6);
  --bs-link-color: #828aff;
  --bs-link-hover-color: #9da3ff;
  --bs-code-color: #f472b6;
  --bs-highlight-bg: #4a3f2a;
  color-scheme: dark;
}

.dark-style body {
  background-color: #232333;
  color: #c5c5d2;
}

/* ===================================================================
   Headings & Text
   =================================================================== */
.dark-style h1, .dark-style h2, .dark-style h3,
.dark-style h4, .dark-style h5, .dark-style h6,
.dark-style .h1, .dark-style .h2, .dark-style .h3,
.dark-style .h4, .dark-style .h5, .dark-style .h6 {
  color: #e4e4ec;
}

.dark-style .text-body {
  color: #c5c5d2 !important;
}

.dark-style .text-heading,
.dark-style .text-dark {
  color: #e4e4ec !important;
}

.dark-style .text-muted {
  color: #8888a0 !important;
}

.dark-style .text-light {
  color: #c5c5d2 !important;
}

.dark-style a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.page-link) {
  color: #828aff;
}

.dark-style a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):not(.page-link):hover {
  color: #9da3ff;
}

/* ===================================================================
   Cards
   =================================================================== */
.dark-style .card {
  background-color: #2b2c40;
  border-color: #3b3b52;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
  color: #c5c5d2;
}

.dark-style .card-header,
.dark-style .card-footer {
  background-color: transparent;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .card-title {
  color: #e4e4ec;
}

/* ===================================================================
   Sidebar / Menu
   =================================================================== */
.dark-style .bg-menu-theme {
  background-color: #2b2c40 !important;
  color: #c5c5d2;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item > .menu-link {
  color: #b4b4c7;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item > .menu-link:hover {
  color: #e4e4ec;
  background-color: rgba(105, 108, 255, 0.08);
}

.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #696cff;
  background-color: rgba(105, 108, 255, 0.16) !important;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item.open > .menu-link {
  color: #e4e4ec;
}

.dark-style .bg-menu-theme .menu-sub > .menu-item > .menu-link {
  color: #b4b4c7;
}

.dark-style .bg-menu-theme .menu-sub > .menu-item > .menu-link:hover {
  color: #e4e4ec;
}

.dark-style .bg-menu-theme .menu-sub > .menu-item.active > .menu-link {
  color: #696cff;
}

.dark-style .bg-menu-theme .menu-header {
  color: #707086;
}

.dark-style .bg-menu-theme .menu-header:before {
  background-color: #707086;
}

.dark-style .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(#2b2c40 41%, rgba(43, 44, 64, 0.11) 95%, rgba(43, 44, 64, 0));
}

.dark-style .app-brand .app-brand-text {
  color: #e4e4ec;
}

.dark-style .layout-menu {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
}

.dark-style .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
  background-color: #5a5a72 !important;
}

.dark-style .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: #696cff !important;
  border: 3px solid rgba(105, 108, 255, 0.3) !important;
}

.dark-style .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background-color: #696cff;
}

/* Sub-menu item active link background */
.dark-style .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: rgba(105, 108, 255, 0.16);
}

/* Sub-menu active toggle background */
.dark-style .bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Sub-menu active icon color */
.dark-style .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
  color: #696cff;
}

/* Open sub-menu item dot indicators */
.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
  background-color: #e4e4ec;
}

.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
  background-color: #696cff;
}

/* Box-shadow ring around active/open sub-menu dots */
.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before,
.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
  box-shadow: 0 0 0 2px #2b2c40;
}

/* Hover background on menu links */
.dark-style html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
.dark-style .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
.dark-style html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.dark-style .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Menu toggle button (collapse sidebar) */
.dark-style .app-brand .layout-menu-toggle {
  background-color: #696cff;
  border-color: #232333;
}

/* Menu scrollbar */
.dark-style .bg-menu-theme .ps__thumb-y,
.dark-style .bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Menu dividers and sub-menu line */
.dark-style .bg-menu-theme hr,
.dark-style .bg-menu-theme .menu-divider {
  border-color: #3b3b52 !important;
}

/* Sidebar vertical box-shadow */
.dark-style .bg-menu-theme.menu-vertical {
  box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
}

/* ===================================================================
   Navbar
   =================================================================== */
.dark-style .bg-navbar-theme {
  background-color: #2b2c40 !important;
  color: #c5c5d2;
  box-shadow: 0 1px 0 #3b3b52 !important;
}

.dark-style .bg-navbar-theme .navbar-nav .nav-link {
  color: #b4b4c7;
}

.dark-style .bg-navbar-theme .navbar-nav .nav-link:hover {
  color: #e4e4ec;
}

.dark-style .bg-navbar-theme .navbar-nav .nav-link.active {
  color: #e4e4ec;
}

.dark-style .navbar-detached {
  background-color: #2b2c40 !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;
}

.dark-style .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
  background-color: #232333 !important;
}

/* ===================================================================
   Footer
   =================================================================== */
.dark-style .bg-footer-theme {
  background-color: #232333 !important;
  color: #8888a0;
}

.dark-style .bg-footer-theme .footer-link {
  color: #b4b4c7;
}

.dark-style .bg-footer-theme .footer-link:hover {
  color: #e4e4ec;
}

/* ===================================================================
   Tables
   =================================================================== */
.dark-style .table {
  color: #c5c5d2;
  border-color: #3b3b52;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-active-bg: rgba(255, 255, 255, 0.08);
}

.dark-style .table > :not(caption) > * > * {
  border-bottom-color: #3b3b52;
  color: #c5c5d2;
  background-color: transparent;
}

.dark-style .table thead th {
  color: #e4e4ec;
  border-color: #3b3b52;
}

.dark-style .table-bordered > :not(caption) > * > * {
  border-color: #3b3b52;
}

.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03);
  color: #c5c5d2;
}

.dark-style .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.05);
  color: #c5c5d2;
}

/* ===================================================================
   Forms
   =================================================================== */
.dark-style .form-control,
.dark-style .form-select {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .form-control:focus,
.dark-style .form-select:focus {
  background-color: #2b2c40;
  border-color: #696cff;
  color: #c5c5d2;
}

.dark-style .form-control::placeholder {
  color: #6c6c84;
}

.dark-style .form-control:disabled,
.dark-style .form-control[readonly],
.dark-style .form-select:disabled {
  background-color: #323249;
  color: #8888a0;
}

.dark-style .form-label,
.dark-style .col-form-label {
  color: #c5c5d2;
}

.dark-style .form-text {
  color: #8888a0;
}

.dark-style .form-check-input {
  background-color: #2b2c40;
  border-color: #3b3b52;
}

.dark-style .form-check-input:checked {
  background-color: #696cff;
  border-color: #696cff;
}

.dark-style .input-group-text {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

/* ===================================================================
   Dropdowns
   =================================================================== */
.dark-style .dropdown-menu {
  background-color: #2b2c40;
  border-color: #3b3b52;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
  color: #c5c5d2;
}

.dark-style .dropdown-item {
  color: #c5c5d2;
}

.dark-style .dropdown-item:hover,
.dark-style .dropdown-item:focus {
  background-color: rgba(105, 108, 255, 0.08);
  color: #e4e4ec;
}

.dark-style .dropdown-item.active,
.dark-style .dropdown-item:active {
  background-color: rgba(105, 108, 255, 0.16);
  color: #696cff;
}

.dark-style .dropdown-divider {
  border-color: #3b3b52;
}

.dark-style .dropdown-header {
  color: #8888a0;
}

/* ===================================================================
   Modals
   =================================================================== */
.dark-style .modal-content {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
}

.dark-style .modal-header {
  border-color: #3b3b52;
}

.dark-style .modal-header .modal-title {
  color: #e4e4ec;
}

.dark-style .modal-footer {
  border-color: #3b3b52;
}

.dark-style .modal-backdrop {
  background-color: #0a0a14;
}

.dark-style .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===================================================================
   Alerts
   =================================================================== */
.dark-style .alert {
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .alert-heading {
  color: #e4e4ec;
}

.dark-style .alert-link {
  filter: brightness(1.2);
}

.dark-style .alert-primary {
  background-color: rgba(105, 108, 255, 0.15);
  border-color: rgba(105, 108, 255, 0.25);
  color: #828aff;
}

.dark-style .alert-primary .alert-link {
  color: #9da3ff;
}

.dark-style .alert-primary hr {
  background-color: #828aff !important;
}

.dark-style .alert-secondary {
  background-color: rgba(133, 146, 163, 0.15);
  border-color: rgba(133, 146, 163, 0.25);
  color: #a1abb8;
}

.dark-style .alert-secondary .alert-link {
  color: #b4bdc6;
}

.dark-style .alert-secondary hr {
  background-color: #a1abb8 !important;
}

.dark-style .alert-success {
  background-color: rgba(113, 221, 55, 0.15);
  border-color: rgba(113, 221, 55, 0.25);
  color: #8de45e;
}

.dark-style .alert-success .alert-link {
  color: #a4eb7e;
}

.dark-style .alert-success hr {
  background-color: #8de45e !important;
}

.dark-style .alert-info {
  background-color: rgba(3, 195, 236, 0.15);
  border-color: rgba(3, 195, 236, 0.25);
  color: #35cff0;
}

.dark-style .alert-info .alert-link {
  color: #5dd9f3;
}

.dark-style .alert-info hr {
  background-color: #35cff0 !important;
}

.dark-style .alert-warning {
  background-color: rgba(255, 171, 0, 0.15);
  border-color: rgba(255, 171, 0, 0.25);
  color: #ffbc33;
}

.dark-style .alert-warning .alert-link {
  color: #ffca5c;
}

.dark-style .alert-warning hr {
  background-color: #ffbc33 !important;
}

.dark-style .alert-danger {
  background-color: rgba(255, 62, 29, 0.15);
  border-color: rgba(255, 62, 29, 0.25);
  color: #ff654a;
}

.dark-style .alert-danger .alert-link {
  color: #ff8573;
}

.dark-style .alert-danger hr {
  background-color: #ff654a !important;
}

.dark-style .alert-dark {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #c5c5d2;
}

.dark-style .alert-dark .alert-link {
  color: #e4e4ec;
}

.dark-style .alert-dark hr {
  background-color: #c5c5d2 !important;
}

.dark-style .alert-gray {
  background-color: rgba(67, 89, 113, 0.15);
  border-color: rgba(67, 89, 113, 0.25);
  color: #8888a0;
}

.dark-style .alert-gray .alert-link {
  color: #a0a0b4;
}

.dark-style .alert-gray hr {
  background-color: #8888a0 !important;
}

.dark-style .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-style .alert-dismissible .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===================================================================
   Badges (Label variants)
   =================================================================== */
.dark-style .bg-label-primary {
  background-color: rgba(105, 108, 255, 0.2) !important;
  color: #828aff !important;
}

.dark-style .bg-label-secondary {
  background-color: rgba(133, 146, 163, 0.2) !important;
  color: #a1abb8 !important;
}

.dark-style .bg-label-success {
  background-color: rgba(113, 221, 55, 0.2) !important;
  color: #8de45e !important;
}

.dark-style .bg-label-info {
  background-color: rgba(3, 195, 236, 0.2) !important;
  color: #35cff0 !important;
}

.dark-style .bg-label-warning {
  background-color: rgba(255, 171, 0, 0.2) !important;
  color: #ffbc33 !important;
}

.dark-style .bg-label-danger {
  background-color: rgba(255, 62, 29, 0.2) !important;
  color: #ff654a !important;
}

.dark-style .bg-label-dark {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #c5c5d2 !important;
}

/* ===================================================================
   List Groups
   =================================================================== */
.dark-style .list-group-item {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .list-group-item-action:hover,
.dark-style .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, 0.05);
  color: #e4e4ec;
}

/* ===================================================================
   Pagination
   =================================================================== */
.dark-style .page-link {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .page-link:hover {
  background-color: rgba(105, 108, 255, 0.08);
  border-color: #3b3b52;
  color: #696cff;
}

.dark-style .page-item.active .page-link {
  background-color: #696cff;
  border-color: #696cff;
}

.dark-style .page-item.disabled .page-link {
  background-color: #323249;
  border-color: #3b3b52;
  color: #5a5a72;
}

/* ===================================================================
   Breadcrumbs
   =================================================================== */
.dark-style .breadcrumb-item + .breadcrumb-item::before {
  color: #8888a0;
}

.dark-style .breadcrumb-item.active {
  color: #8888a0;
}

/* ===================================================================
   Progress Bars
   =================================================================== */
.dark-style .progress {
  background-color: #323249;
}

/* ===================================================================
   Tooltips & Popovers
   =================================================================== */
.dark-style .popover {
  background-color: #2b2c40;
  border-color: #3b3b52;
}

.dark-style .popover-header {
  background-color: #323249;
  border-color: #3b3b52;
  color: #e4e4ec;
}

.dark-style .popover-body {
  color: #c5c5d2;
}

.dark-style .bs-popover-top > .popover-arrow::after,
.dark-style .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-top-color: #2b2c40;
}

.dark-style .bs-popover-end > .popover-arrow::after,
.dark-style .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-right-color: #2b2c40;
}

.dark-style .bs-popover-bottom > .popover-arrow::after,
.dark-style .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-bottom-color: #2b2c40;
}

.dark-style .bs-popover-start > .popover-arrow::after,
.dark-style .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-left-color: #2b2c40;
}

/* ===================================================================
   Accordion
   =================================================================== */
.dark-style .accordion-item {
  background-color: #2b2c40;
  border-color: #3b3b52;
}

.dark-style .accordion-button {
  background-color: #2b2c40;
  color: #c5c5d2;
}

.dark-style .accordion-button:not(.collapsed) {
  background-color: rgba(105, 108, 255, 0.08);
  color: #696cff;
}

.dark-style .accordion-button::after {
  filter: invert(1) brightness(0.7);
}

/* ===================================================================
   Tabs & Nav Pills
   =================================================================== */
.dark-style .nav-tabs {
  border-color: #3b3b52;
}

.dark-style .nav-tabs .nav-link,
.dark-style .nav-tabs .nav-item .nav-link {
  color: #b4b4c7;
}

.dark-style .nav-tabs .nav-item .nav-link:not(.active) {
  background-color: #323249;
}

.dark-style .nav-tabs .nav-link:hover,
.dark-style .nav-tabs .nav-item .nav-link:hover,
.dark-style .nav-tabs .nav-item .nav-link:focus {
  border-color: #3b3b52;
  color: #e4e4ec;
}

.dark-style .nav-tabs .nav-link:not(.active):hover,
.dark-style .nav-tabs .nav-link:not(.active):focus {
  color: #e4e4ec;
}

.dark-style .nav-tabs .nav-link.active,
.dark-style .nav-tabs .nav-item .nav-link.active {
  background-color: #2b2c40;
  border-color: #3b3b52 #3b3b52 #2b2c40;
  border-bottom-color: #2b2c40;
  color: #e4e4ec;
}

.dark-style .nav-tabs .nav-link.active:hover,
.dark-style .nav-tabs .nav-link.active:focus {
  border-bottom-color: #2b2c40;
}

/* Tab separator between items */
.dark-style .nav-align-top .nav-tabs .nav-item:not(:first-child) .nav-link {
  border-left-color: #3b3b52;
}

/* Tab content box-shadow */
.dark-style .nav-align-top .nav-tabs ~ .tab-content {
  box-shadow: 0px 6px 7px -1px rgba(0, 0, 0, 0.25);
}

.dark-style .nav-align-top .nav-tabs .nav-link.active {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

/* Tab content background */
.dark-style .tab-content {
  background-color: #2b2c40;
  color: #c5c5d2;
}

/* Nav pills */
.dark-style .nav-pills .nav-link {
  color: #b4b4c7;
}

.dark-style .nav-pills .nav-link:not(.active, .disabled) {
  color: #b4b4c7;
}

.dark-style .nav-pills .nav-link:hover {
  color: #e4e4ec;
}

/* Disabled nav links */
.dark-style .nav-tabs .nav-item .nav-link.disabled {
  color: #5a5a72;
}

/* ===================================================================
   SweetAlert2
   =================================================================== */
.dark-style .swal2-popup {
  background-color: #2b2c40 !important;
  color: #c5c5d2 !important;
}

.dark-style .swal2-title {
  color: #e4e4ec !important;
}

.dark-style .swal2-html-container {
  color: #c5c5d2 !important;
}

.dark-style .swal2-input,
.dark-style .swal2-textarea {
  background-color: #323249 !important;
  border-color: #3b3b52 !important;
  color: #c5c5d2 !important;
}

/* ===================================================================
   DataTables
   =================================================================== */
.dark-style .dataTables_wrapper {
  color: #c5c5d2;
}

.dark-style .dataTables_wrapper .dataTables_length select,
.dark-style .dataTables_wrapper .dataTables_filter input {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .dataTables_wrapper .dataTables_info {
  color: #8888a0;
}

.dark-style table.dataTable tbody tr {
  background-color: #2b2c40;
}

.dark-style table.dataTable tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.dark-style table.dataTable.stripe tbody tr.odd,
.dark-style table.dataTable.display tbody tr.odd {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ===================================================================
   Scrollbar
   =================================================================== */
.dark-style ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dark-style ::-webkit-scrollbar-track {
  background: #232333;
}

.dark-style ::-webkit-scrollbar-thumb {
  background: #3b3b52;
  border-radius: 3px;
}

.dark-style ::-webkit-scrollbar-thumb:hover {
  background: #52526e;
}

/* ===================================================================
   Misc / Utility Overrides
   =================================================================== */
.dark-style .bg-white {
  background-color: #2b2c40 !important;
}

.dark-style .bg-light {
  background-color: #323249 !important;
}

.dark-style .border {
  border-color: #3b3b52 !important;
}

.dark-style .border-bottom {
  border-color: #3b3b52 !important;
}

.dark-style .border-top {
  border-color: #3b3b52 !important;
}

.dark-style .shadow,
.dark-style .shadow-sm,
.dark-style .shadow-lg {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3) !important;
}

.dark-style hr {
  border-color: #3b3b52;
  opacity: 0.5;
}

.dark-style .content-backdrop {
  background-color: #0f0f1a;
}

/* ===================================================================
   Layout Overlay
   =================================================================== */
.dark-style .layout-overlay {
  background-color: rgba(15, 15, 26, 0.6);
}

/* ===================================================================
   Dark Mode Toggle Button
   =================================================================== */
.dark-mode-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.4rem;
  font-size: 1.3rem;
  color: #697a8d;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
}

.dark-mode-toggle:hover {
  color: #566a7f;
}

.dark-style .dark-mode-toggle {
  color: #b4b4c7;
}

.dark-style .dark-mode-toggle:hover {
  color: #e4e4ec;
}

/* Hide/show icons based on mode */
.dark-mode-toggle .bx-moon {
  display: inline;
}
.dark-mode-toggle .bx-sun {
  display: none;
}
.dark-style .dark-mode-toggle .bx-moon {
  display: none;
}
.dark-style .dark-mode-toggle .bx-sun {
  display: inline;
}

/* ===================================================================
   Transitions
   =================================================================== */
html.light-style,
html.dark-style {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card,
.bg-menu-theme,
.bg-navbar-theme,
.bg-footer-theme,
.dropdown-menu,
.modal-content,
.form-control,
.form-select,
.input-group-text,
.list-group-item,
.page-link,
.accordion-item,
.accordion-button,
.table,
.navbar-detached {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ===================================================================
   ApexCharts
   =================================================================== */
.dark-style .apexcharts-tooltip {
  background: #2b2c40 !important;
  border-color: #3b3b52 !important;
  color: #c5c5d2 !important;
}

.dark-style .apexcharts-tooltip .apexcharts-tooltip-title {
  background: #323249 !important;
  border-color: #3b3b52 !important;
  color: #e4e4ec !important;
}

.dark-style .apexcharts-tooltip .apexcharts-tooltip-series-group {
  background: transparent !important;
}

.dark-style .apexcharts-tooltip .apexcharts-tooltip-text {
  color: #c5c5d2 !important;
}

.dark-style .apexcharts-xaxistooltip {
  background: #2b2c40 !important;
  border-color: #3b3b52 !important;
  color: #c5c5d2 !important;
}

.dark-style .apexcharts-xaxistooltip:after {
  border-bottom-color: #2b2c40 !important;
}

.dark-style .apexcharts-xaxistooltip:before {
  border-bottom-color: #3b3b52 !important;
}

.dark-style .apexcharts-yaxistooltip {
  background: #2b2c40 !important;
  border-color: #3b3b52 !important;
  color: #c5c5d2 !important;
}

.dark-style .apexcharts-text,
.dark-style .apexcharts-xaxis-label,
.dark-style .apexcharts-yaxis-label {
  fill: #8888a0 !important;
}

.dark-style .apexcharts-title-text {
  fill: #e4e4ec !important;
}

.dark-style .apexcharts-subtitle-text {
  fill: #8888a0 !important;
}

.dark-style .apexcharts-legend-text {
  color: #c5c5d2 !important;
}

.dark-style .apexcharts-gridline {
  stroke: #3b3b52 !important;
}

.dark-style .apexcharts-grid-borders line {
  stroke: #3b3b52 !important;
}

.dark-style .apexcharts-radialbar-track .apexcharts-radialbar-area {
  stroke: #3b3b52;
}

.dark-style .apexcharts-pie-label,
.dark-style .apexcharts-datalabel,
.dark-style .apexcharts-datalabel-label,
.dark-style .apexcharts-datalabel-value {
  fill: #c5c5d2 !important;
}

.dark-style .apexcharts-menu {
  background: #2b2c40 !important;
  border-color: #3b3b52 !important;
}

.dark-style .apexcharts-menu-item:hover {
  background: rgba(105, 108, 255, 0.08) !important;
}

.dark-style .apexcharts-toolbar svg {
  fill: #8888a0 !important;
}

/* ===================================================================
   Bootstrap Extra Components (5.2.3)
   =================================================================== */

/* Toast */
.dark-style .toast {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
}

.dark-style .toast-header {
  background-color: #323249;
  border-color: #3b3b52;
  color: #e4e4ec;
}

.dark-style .toast-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Offcanvas */
.dark-style .offcanvas {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}

.dark-style .offcanvas-header {
  border-color: #3b3b52;
}

.dark-style .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Spinner */
.dark-style .spinner-border {
  border-right-color: transparent;
}

/* Placeholder / Skeleton */
.dark-style .placeholder {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Close button */
.dark-style .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Badge */
.dark-style .badge.bg-secondary {
  color: #fff;
}

/* Carousel */
.dark-style .carousel-caption {
  color: #c5c5d2;
}

/* BS Stepper */
.dark-style .bs-stepper {
  background-color: #2b2c40;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dark-style .bs-stepper .bs-stepper-header {
  border-color: #3b3b52;
}

.dark-style .bs-stepper .step-trigger {
  color: #b4b4c7;
}

.dark-style .bs-stepper .bs-stepper-label {
  color: #c5c5d2;
}

.dark-style .bs-stepper .bs-stepper-content {
  color: #c5c5d2;
}

.dark-style .bs-stepper .line {
  border-color: #3b3b52;
}

/* Perfect Scrollbar */
.dark-style .ps__rail-y:hover,
.dark-style .ps__rail-y.ps--clicking {
  background-color: #323249 !important;
}

.dark-style .ps__thumb-y {
  background-color: #52526e !important;
}

/* Notify.js */
.dark-style .notifyjs-corner .notifyjs-wrapper .notifyjs-container {
  background-color: #2b2c40;
  border-color: #3b3b52;
  color: #c5c5d2;
}