body.dark-mode {
    background: #101316;
}

/* Scrollbar thumb (the part you can drag) */
.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar color */
    border-radius: 10px; /* Make it round */
}

/* Scrollbar thumb on hover */
.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}

.dark-mode .navbar-custom {
    min-height: 65px;
    padding: 0 1.5rem;
    background: #000;
    border-bottom: 1px solid #6a6868;
}

.dark-mode .navbar-nav .sidebar-toggle-btn {
    padding: 10px !important;
    border: 1px solid;
}

.dark-mode .user-dropdown-menu {
    border: 1px solid rgba(255,255,255,.4);
    background: #000;
}

.dark-mode .dropdown-item {
    color: #ffffff;
    font-family: ystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.dark-mode .nav-link {
    color: #fff;
}


.dark-mode .dropdown-item:active, 
.dark-mode .dropdown-item:hover, 
.dark-mode .dropdown-item:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .sidebar {
    background-color: #000;
} 

.dark-mode .sidebar-brand {
    background-color: #000;
    border-bottom: 1px solid #6a6868; 
} 

.dark-mode .sidebar-scroll {
    background: #000;
}

.dark-mode #timeline .post-content .post-date span {
    margin-top: 0px;
}

.dark-mode .sidebar-menu li a:active, 
.dark-mode .sidebar-menu li a:hover, 
.dark-mode .sidebar-menu li a:focus {
    color: #ffffff;
    background: rgba(255,255,255,.1);
}

.dark-mode .sidebar-menu li.active > a {
    background: rgba(255,255,255,.1);
}

.dark-mode .sidebar-menu li a {
    border-radius: 30px;
}

.dark-mode .page-wrapper {
    background-color: #101316;
}

.dark-mode .card {
    background-color: #0b0d0f;
    border: 1px solid #212325;
}