/* global scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* firefox scrollbar styles */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* task modal scrollable areas */
.task-modal-body,
.task-description-container,
.assignees-container,
.categories-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.task-modal-body::-webkit-scrollbar,
.task-description-container::-webkit-scrollbar,
.assignees-container::-webkit-scrollbar,
.categories-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* table scrollbar styling */
.table-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* calendar view scrollbar styling */
.calendar-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.calendar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* fix for scrollbar visibility issues in some browsers */
@media screen and (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}