.app {
    height: 100%;
}

.treeRoot {
    height: 100%;
}

.draggingSource {
    opacity: 0.3;
}

.dropTarget {
    background-color: #e8f0fe !important;
}

.root {
    align-items: 'center';
    background-color: #e8f0fe;
    border-radius: 4px;
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
    color: #fff;
    display: inline-grid;
    font-size: 14px;
    gap: 8px;
    grid-template-columns: auto auto;
    padding: 4px 8px;
    pointer-events: none;
}

.icon,
.label {
    align-items: center;
    display: flex;
}

/* Desktop specific styles */
.desktopApp {
    height: 100%;
    border-radius: 8px;
}

.desktopTreeRoot {
    height: 100%;
    padding: 10px;
}

.desktopDraggingSource {
    opacity: 0.3;
    border: 2px dashed #1976d2;
    background-color: #e3f2fd;
}

.desktopDropTarget {
    background-color: #e3f2fd !important;
    border: 2px solid #1976d2 !important;
    border-radius: 4px;
}

.desktopPlaceholderContainer {
    background-color: #1976d2;
    border-radius: 2px;
}

/* Mobile specific styles */
.mobileApp {
    height: 100%;
    border-radius: 8px;
}

.mobileTreeRoot {
    height: 100%;
    padding: 10px;
}

.mobileDraggingSource {
    opacity: 0.3;
    border: 2px dashed #4caf50;
    background-color: #e8f5e8;
}

.mobileDropTarget {
    background-color: #e8f5e8 !important;
    border: 2px solid #4caf50 !important;
    border-radius: 4px;
}

.mobilePlaceholderContainer {
    background-color: #4caf50;
    border-radius: 2px;
}