/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.8);
}

/* Waterfall Specific utility */
.wf-row:hover {
    background-color: rgba(14, 165, 233, 0.05);
    /* primary-50 hover */
}

/* Drag & Drop */
.drag-over {
    background-color: rgba(14, 165, 233, 0.05);
    /* primary-50 */
    border: 2px dashed #0ea5e9 !important;
    /* primary-500 */
}

/* Transitions for Modal */
.translate-x-full {
    transform: translateX(100%);
}

.translate-x-0 {
    transform: translateX(0);
}

/* Striped background for waterfall area to help visually track rows */
#waterfallContainer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.02) 50%, transparent 50%);
    background-size: 100% 64px;
    /* 32px per row */
}

:is(.dark) #waterfallContainer {
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 50%, transparent 50%);
}