/* Dark mode overrides for SB Admin 2 */
/* Scoped under body.dark-mode so light mode is unaffected */

/* ===== Base / Layout ===== */
body.dark-mode {
    background-color: #1a1c23;
    color: #e0e0e0;
}

body.dark-mode #content-wrapper {
    background-color: #1a1c23;
}

/* ===== Topbar ===== */
body.dark-mode .topbar {
    background-color: #27293d !important;
    border-bottom: 1px solid #363952;
}

body.dark-mode .topbar .navbar-search .form-control {
    background-color: #1a1c23 !important;
    border: 1px solid #363952 !important;
    color: #e0e0e0;
}

body.dark-mode .topbar .navbar-search .btn {
    background-color: #4e73df;
}

body.dark-mode .topbar .nav-link {
    color: #b0b3c5 !important;
}

body.dark-mode .topbar .topbar-divider {
    border-color: #363952;
}

/* ===== Footer ===== */
body.dark-mode .sticky-footer {
    background-color: #27293d !important;
    color: #b0b3c5;
}

/* ===== Cards ===== */
body.dark-mode .card {
    background-color: #27293d;
    border-color: #363952;
    color: #e0e0e0;
}

body.dark-mode .card-header {
    background-color: #2d2f45;
    border-bottom-color: #363952;
}

body.dark-mode .card-body {
    color: #e0e0e0;
}

/* Keep accent colors on border-left cards */
body.dark-mode .card.border-left-primary { border-left-color: #4e73df !important; }
body.dark-mode .card.border-left-success { border-left-color: #1cc88a !important; }
body.dark-mode .card.border-left-info    { border-left-color: #36b9cc !important; }
body.dark-mode .card.border-left-warning { border-left-color: #f6c23e !important; }
body.dark-mode .card.border-left-danger  { border-left-color: #e74a3b !important; }

body.dark-mode .card .shadow,
body.dark-mode .shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, .4) !important;
}

/* ===== Tables ===== */
body.dark-mode .table {
    color: #e0e0e0;
}

body.dark-mode .table-bordered {
    border-color: #363952;
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
    border-color: #363952;
}

body.dark-mode .table thead th {
    border-bottom-color: #4a4d6a;
    color: #ffffff;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #2d2f45;
    color: #e0e0e0;
}

body.dark-mode .table th {
    color: #ffffff;
}

/* ===== Text / Headings ===== */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
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;
}

body.dark-mode .text-gray-800 {
    color: #e0e0e0 !important;
}

body.dark-mode .text-gray-600 {
    color: #b0b3c5 !important;
}

body.dark-mode .text-gray-500 {
    color: #9a9cb5 !important;
}

body.dark-mode .text-gray-400 {
    color: #8486a0 !important;
}

body.dark-mode .text-gray-300 {
    color: #6e708a !important;
}

body.dark-mode .text-muted {
    color: #8486a0 !important;
}

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

body.dark-mode small,
body.dark-mode .small {
    color: #9a9cb5;
}

/* ===== Links ===== */
body.dark-mode a {
    color: #6d8ee7;
}

body.dark-mode a:hover {
    color: #8ca8f0;
}

body.dark-mode .text-primary {
    color: #6d8ee7 !important;
}

/* ===== Forms / Inputs ===== */
body.dark-mode .form-control {
    background-color: #1a1c23;
    border-color: #363952;
    color: #e0e0e0;
}

body.dark-mode .form-control:focus {
    background-color: #1a1c23;
    border-color: #4e73df;
    color: #e0e0e0;
}

body.dark-mode input[style*="border:0"],
body.dark-mode input[style*="border: 0"] {
    background-color: transparent !important;
    color: #b0b3c5 !important;
}

/* ===== Dropdowns ===== */
body.dark-mode .dropdown-menu {
    background-color: #27293d;
    border-color: #363952;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2d2f45;
    color: #ffffff;
}

body.dark-mode .dropdown-divider {
    border-top-color: #363952;
}

/* ===== Modals ===== */
body.dark-mode .modal-content {
    background-color: #27293d;
    border-color: #363952;
    color: #e0e0e0;
}

body.dark-mode .modal-header {
    border-bottom-color: #363952;
}

body.dark-mode .modal-footer {
    border-top-color: #363952;
}

body.dark-mode .modal-header .close {
    color: #e0e0e0;
}

/* ===== Buttons ===== */
body.dark-mode .btn-outline-primary {
    color: #6d8ee7;
    border-color: #6d8ee7;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #4e73df;
    border-color: #4e73df;
    color: #fff;
}

body.dark-mode .btn-secondary {
    background-color: #363952;
    border-color: #363952;
    color: #e0e0e0;
}

/* ===== Pagination ===== */
body.dark-mode .page-link {
    background-color: #27293d;
    border-color: #363952;
    color: #6d8ee7;
}

body.dark-mode .page-item.active .page-link {
    background-color: #4e73df;
    border-color: #4e73df;
    color: #fff;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: #1a1c23;
    border-color: #363952;
    color: #6e708a;
}

body.dark-mode .page-link:hover {
    background-color: #2d2f45;
    border-color: #363952;
    color: #8ca8f0;
}

/* ===== Sidebar collapse inner (Utilities dropdown) ===== */
body.dark-mode .collapse-inner {
    background-color: #27293d !important;
    border: 1px solid #363952;
}

body.dark-mode .collapse-inner .collapse-header {
    color: #8486a0;
}

body.dark-mode .collapse-inner .collapse-item {
    color: #e0e0e0;
}

body.dark-mode .collapse-inner .collapse-item:hover {
    background-color: #2d2f45;
}

/* ===== Sidebar card (price display) ===== */
body.dark-mode .sidebar-card {
    background-color: rgba(0, 0, 0, 0.2);
}

/* ===== Scroll to top button ===== */
body.dark-mode .scroll-to-top {
    background-color: rgba(90, 92, 105, 0.5);
}

body.dark-mode .scroll-to-top:hover {
    background-color: #5a5c69;
}

/* ===== Alerts / Bg utilities ===== */
body.dark-mode .bg-white {
    background-color: #27293d !important;
}

body.dark-mode .bg-light {
    background-color: #1a1c23 !important;
}

/* ===== Chart.js canvas (invert approach not needed, just ensure container is dark) ===== */
body.dark-mode .chart-area {
    background-color: transparent;
}

/* ===== Dark mode toggle button ===== */
body.dark-mode #darkModeToggle {
    color: #f6c23e !important;
}